CSS Selectors 101: Targeting Elements with Precision

Why CSS selectors are needed

CSS selectors are the foundation of styling. CSS selectors are a way of selecting HTML elements that we want to style.

1. Element selector

Element selector selects all HTML elements of the same type.

“paint all the houses”

p {
    color: black;
}

• every <p></p> becomes black

2. Class selector

It is a way of selecting all elements with a specific class and styling them.

“paint all the houses whose doors are blue”

.bg-aquamarine {
    background-color: aquamarine;
}

<div class="bg-aquamarine">Box 1</div>
<section class="bg-aquamarine">Box 2</section>

• both elements will get an aquamarine background

3. ID selector

It is a way of selecting an element with a specific ID. An ID can be assigned to only one element.

“paint this house”

#paragraph {
    color: red;
}

<p id="paragraph">Important text</p>

• only this paragraph color will become red

4. Group selectors

It is a way of selecting different HTML elements and applying the same style.

“paint all houses whose doors are blue and whose doors are red”

h1, h2, h3 {
    font-family: sans-serif;
}

5. Descendant selectors

It lets you apply style to an element that is inside another element.

“paint the door inside that house”

h1 p {
    color: chartreuse;
}

<h1>
    <p>This text will be chartreuse</p>
</h1>
<p>This text will NOT change</p>

• only the paragraph inside h1 will be colored chartreuse

6. Universal selector (*)

This selects all the elements in HTML.

* {
    color: aqua;
}

<div>This is a div</div>
<p>This is a paragraph</p>
<h1>This is a header</h1>

• all text will be aqua

7. General sibling selector (~)

It is used to select all the siblings of an element.

<div>
    <h1>Main Title</h1>
    <p>Paragraph 1 (This will be styled)</p>
    <span>Some other element</span>
    <p>Paragraph 2 (This will be styled)</p>
    <p>Paragraph 3 (This will be styled)</p>
</div>

<section>
    <h1>Again a h1</h1>
    <p>Paragraph 1 (This will be styled because it is a sibling of h1)</p>
</section>

h1 ~ p {
    color: blue;
    font-weight: bold;
}

8. Adjacent sibling selector (+)

This selects the element that is just after a specific element.

h2 + p {
    color: red;
}

<div>
    <h2></h2>
    <p>This p color will be red because it is just after the h2</p>
    <p>This p color will not be red</p>
</div>

9. Pseudo selector

It allows you to select an element when it is in a specific condition, like styling an input when the user hovers over it.

input:hover {
    color: blue;
}

›There are two types of pseudo selectors -

1. Pseudo-class selector

This is used to select a specific state of an existing element. They are denoted by : (single colon).

Top 5 pseudo-class selectors:

a. :hover

input {
    color: yellow;
}
input:hover {
    color: blue;
}

b. :focus

input:focus {
    color: aquamarine;
}

c. :link

a:link {
    color: pink;
}

d. :visited

a:visited {
    color: yellow;
}

e. :checked

input[type="checkbox"]:checked {
    accent-color: red;
}

2.Pseudo-element selector

These are used to design a specific part of an element. They are denoted by :: (double colon).

a. ::first-line

p::first-line {
    color: red;
}

b. ::first-letter

p::first-letter {
    color: red;
}

c. ::placeholder

input::placeholder {
    color: red;
}

Basic selector priority (very high level)

From lowest to highest -

• Element selector
• Class selector
• ID selector

p {
    color: blue;
}
.text {
    color: green;
}
#main {
    color: red;
}

<p id="main" class="text">Hello</p>

• the paragraph color will be red

›What if selectors are the same and written multiple times?

The CSS property written last will be applied.

.bg {
    background-color: black;
}
.bg {
    background-color: white;
}

<div class="bg"></div>

• background color of the div will be white