# CSS Selectors

## Simple selectors

### Type selector

Selects elements by tag name.

```html
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
```

```css
div {
  color: white;
}
```

All div elements have font color set to white.

### Class selector

Selects elements by class (dot sign before class name).

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <article class="content"></article>
  <div class="footer"></div>
</body>
```

```css
.content {
  color: white;
}
```

All elements with class="content" (second div and article) have font color set to white.

> **Note:** elements can have multiple classes separated with a space (e.g. `<div class="content intro"></div>`) but it's enough to include just one of them in a class selector (e.g. .content).

### Id selector

Selects element by id (hashtag before id name).

```html
<body>
  <div id="header"></div>
  <div id="first-section"></div>
  <div id="second-section"></div>
  <div id="footer"></div>
</body>
```

```css
#header {
  color: white;
}
```

The element with id="header" (first div) has font color set to white.

> **Important!** A specific id name can only belong to one element on a page (e.g. there can be just one element with id="header") otherwise CSS rules attached to it won't work. For formatting multiple elements you want to use a class selector.

### Attribute selector

Selects elements by an attribute-value pair (written inside square brackets).

```html
<form>
  <input type="email"></input>
  <input type="password"></input>
  <button>Log in</button>
</form>
```

```css
[type="email"] {
  color: white;
}
```

All elements with type="email" (first input) has font color set to white.

### Universal selector

Selects all elements of the page.

```css
* {
  color: white;
}
```

All elements have font color set to white.

## Combined selectors

### Compound selector

Combine together multiple simple selectors (of any type) which point to the same elements (should be avoided in real code!):

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
div.content {
  color: white;
}
```

All div elements with class="content" (second and third div) have font color set to white.

### Descendant selector

Selects elements nested (no matter how deep) into other elements using multiple simple selectors (of any type) separated with a space:

```html
<body>
  <div class="header"></div>
  <div class="content">
    <p>Some text</p>
    <div class="some-more-content">
      <p>Some more text</p>
    </div>
  </div>
  <div class="content">
    <p>Some text</p>
    <div class="some-more-content">
      <p>Some more text</p>
    </div>
  </div>
  <div class="footer"></div>
</body>
```

```css
.content p {
  color: white;
}
```

All p elements nested into other elements with class="content" (all four p elements in this case) have font color set to white.

## Child selector

Selects child elements nested one level deep into parent (container) elements using multiple simple selectors (of any type) separated with a "bigger than" (>) sign:

```html
<body>
  <div class="header"></div>
  <div class="content">
    <p>Some text</p>
    <div class="some-more-content">
      <p>Some more text</p>
    </div>
  </div>
  <div class="content">
    <p>Some text</p>
    <div class="some-more-content">
      <p>Some more text</p>
    </div>
  </div>
  <div class="footer"></div>
</body>
```

```css
.content > p {
  color: white;
}
```

All p elements nested one level deep into elements with class="content" (only the first and third p) have font color set to white.

### General sibling selector

Selects all sibling elements of an element using multiple simple selectors (of any type) separated with a tilde (~) sign.

```html
<body>
  <div id="header"></div>
  <div id="first-section"></div>
  <div id="second-section"></div>
  <div id="footer"></div>
</body>
```

```css
#first-section ~ div {
  color: white;
}
```

All div elements which are siblings of the element with id="first-section" (first, third and fourth div) have font color set to white.

### Adjacent sibling selector

Selects all adjacent sibling elements of an element using multiple simple selectors (of any type) separated with a plus (+) sign.

```html
<body>
  <div id="header"></div>
  <div id="first-section"></div>
  <div id="second-section"></div>
  <div id="footer"></div>
</body>
```

```css
#first-section + div {
  color: white;
}
```

All div elements which are adjacent siblings of the element with id="first-section" (only first and third div) have font color set to white.

### Selector list

Combine together multiple simple selectors (of any type) which point to the same elements (should be avoided in real code!):

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
.header, .footer {
  color: white;
}
```

All elements with class="header" and class="footer" (first and last div) have font color set to white.

## Pseudo classes

### :active

Selects elements which are currently in active state (when clicked).

```css
a:active {
  color: white;
}
```

All a elements in active state have font color set to white.

### :hover

Selects elements which are currently in hovered state (cursor is on the element).

```css
a:hover {
  color: white;
}
```

### :visited

Selects elements (links) which are currently in visited state (already clicked, after active state).

```css
a:visited {
  color: white;
}
```

All a elements in visited state have font color set to white.

### :checked

Selects elements (checkbox or radio inputs) which are currently in checked state.

```html
<form>
  Email: <input type="email" name="name">
  <input type="checkbox" name="terms-of-service"> I read the Terms of Service
  <button>Subscribe</button>
</form>
```

```css
[name="terms-of-service"]:checked {
  display: none;
}
```

The checkbox element with name="terms-of-service" will disappear when it's in checked state.

### :first-child

Selects first child element of a parent (container) element.

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
body:first-child {
  color: white;
}
```

The checkbox element with name="terms-of-service" will disappear when it's in checked state.

### :last-child

Selects last child element of a parent (container) element.

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
body:last-child {
  color: white;
}
```

The element nested last into body element (last div) has font color set to white.

### :nth-child()

Selects nth (condition provided in parantheses) child element(s) of a parent (container) element.

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
body:nth-child(2) {
  color: white;
}
```

The element nested as second into body element (second div) has font color set to white.

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
body:nth-child(even) {
  color: white;
}
```

The elements nested as even nth into body element (second and fourth div) have font color set to white.

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
body:nth-child(odd) {
  color: white;
}
```

The elements nested as odd nth into body element (first and third div) have font color set to white.

More options, explanations about :nth-child() on [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child).

### :nth-last-child()

Selects nth (condition provided in parantheses) child element(s) of a parent (container) element but counting from the end. Has the same conditions as :nth-child().

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
body:nth-last-child(2) {
  color: white;
}
```

The element nested as second last into body element (third div in this case) has font color set to white.

### :first-of-type

Selects first element which matches a simple selector (of any type).

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
.content:first-of-type {
  color: white;
}
```

The first element with class="content" has font color set to white.

### :last-of-type

Selects last element which matches a simple selector (of any type).

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
.content:last-of-type {
  color: white;
}
```

The last element with class="content" has font color set to white.

### :nth-of-type()

Selects nth (condition provided in parantheses) element(s) which matches a simple selector (of any type). Has the same conditions as :nth-child().

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
.content:nth-of-type(2) {
  color: white;
}
```

The second element with class="content" has font color set to white.

### :nth-last-of-type()

Selects nth (condition provided in parantheses) element(s) which matches a simple selector (of any type) but counting from the end. Has the same conditions as :nth-child().

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
.content:nth-last-of-type(2) {
  color: white;
}
```

The second last element with class="content" has font color set to white.

### :not

Selects elements which don't match a simple selector (of any type).

```html
<body>
  <div class="header"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="footer"></div>
</body>
```

```css
div:not(.content) {
  color: white;
}
```

All div elements without class="content" (first and last div) have font color set to white.

### :root

Selects the root (html) element of the page.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Hello World</title>
</head>
<body>
  <p>Lorem ipsum dolor sit amet</p>
</body>
</html>
```

```css
:root {
  font-size: 15px;
}
```

The html element has font-size set to 15px (which can be used as base for rem units).

## Pseudo elements

### ::after

Creates a new "pseudo element" after elements.

```html
<body>
  <p>"Lorem ipsum dolor sit amet"</p>
  <p>"Hello World"</p>
</body>
```

```css
p::after {
  content: " - John Doe";
  color: white;
}
```

A new "pseudo element" with the content " - John Doe" and font color set to white is created after each p element.

### ::before

Creates a new "pseudo element" before elements.

```html
<body>
  <p>"Lorem ipsum dolor sit amet" - John Doe</p>
  <p>"Hello World" - John Doe</p>
</body>
```

```css
p::before {
  content: "A wise man's advice: ";
  color: white;
}
```

A new "pseudo element" - with the content "A wise man's advice: " and font color set to white - is created before each p element.

### ::first-letter

Selects the first letter of text content inside elements.

```html
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</body>
```

```css
p::first-letter {
  color: white;
}
```

First letter of text content inside p element(s) (L in this case) will have font color set to white.

### ::first-line

Selects the first line of text content inside elements (first line refers to text inside an element displayed by browser before the first line break).

```html
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</body>
```

```css
p::first-line {
  color: white;
}
```

First line of text content inside p element(s) will have font color set to white.

### ::placeholder

Selects placeholder text of input elements (displayed when field is empty).

```html
<form>
  Email: <input type="email" name="email" placeholder="example@proton.me">
  Password: <input type="password" name="password" placeholder="example1234">
  <button>Log in</button>
</form>
```

```css
p::placeholder {
  color: white;
}
```

Placeholder text of all input elements will have font color set to white.
