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).

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).

a:hover {
  color: white;
}

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

:visited

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

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 element nested first into body element (first div) has font color set to white.

: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.

: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</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
input::placeholder {
  color: white;
}

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

CSS Selectors

Related content

From FosseryWeb Min

From external sources