# CSS Selectors
## Simple selectors
### Type selector
Selects elements by tag name.
```html
```
```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
```
```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. ``) 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
```
```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
```
```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
```
```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
Some text
Some more text
Some text
Some more text
```
```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
Some text
Some more text
Some text
Some more text
```
```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
```
```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
```
```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
```
```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
```
```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
```
```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
```
```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
```
```css
body:nth-child(2) {
color: white;
}
```
The element nested as second into body element (second div) has font color set to white.
```html
```
```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
```
```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
```
```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
```
```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
```
```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
```
```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
```
```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
```
```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
Hello World
Lorem ipsum dolor sit amet
```
```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
"Lorem ipsum dolor sit amet"
"Hello World"
```
```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
"Lorem ipsum dolor sit amet" - John Doe
"Hello World" - John Doe
```
```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
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.
```
```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
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.
```
```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
```
```css
p::placeholder {
color: white;
}
```
Placeholder text of all input elements will have font color set to white.