CSS Selectors
Download (.odt) Download (Markdown)Simple selectors
[hook]Type selector
[hook]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
[hook]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
[hook]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
[hook]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
[hook]Selects all elements of the page.
CSS
* {
color: white;
}All elements have font color set to white.
Combined selectors
[hook]Compound selector
[hook]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
[hook]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
[hook]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
[hook]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
[hook]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
[hook]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
[hook]:active
[hook]Selects elements which are currently in active state (when clicked).
a:active {
color: white;
}All a elements in active state have font color set to white.
:hover
[hook]Selects elements which are currently in hovered state (cursor is on the element).
a:hover {
color: white;
}All a elements in hovered state have font color set to white.
:visited
[hook]Selects elements (links) which are currently in visited state (already clicked, after active state).
a:visited {
color: white;
}All a elements in visited state have font color set to white.
:checked
[hook]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
[hook]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 element nested first into body element (first div) has font color set to white.
:last-child
[hook]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()
[hook]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).
:nth-last-child()
[hook]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
[hook]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
[hook]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()
[hook]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()
[hook]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
[hook]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
[hook]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
[hook]::after
[hook]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
[hook]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
[hook]Selects the first letter of text content inside elements.
HTML
<body>
<p>Lorem ipsum dolor sit amet</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
[hook]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
[hook]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
input::placeholder {
color: white;
}Placeholder text of all input elements will have font color set to white.