CSS Selectors

CSS Selectors

CSS selectors are used to select HTML elements and apply styles to them. We already know basic selectors like class, id, and element selectors. But CSS has many more selectors that help us select elements more precisely.

For example, instead of giving every paragraph the same style, we can select only the paragraph that comes after a heading, or only the input with a particular type.

1. Child and Sibling Selectors

Child Selector >

The > selector selects only the direct child of an element.

<div>
    <p>Hello</p>

    <section>
        <p>World</p>
    </section>
</div>

div > p {
    color: red;
}

Here, only Hello becomes red because it is directly inside the div.

The World paragraph is not selected because it is inside the section.

Descendant Selector

A space between two selectors means that the second element is somewhere inside the first element.

div p {
    color: blue;
}

This selects all <p> elements inside the <div>, even if there are other elements between them.

So remember:

div p     /* p anywhere inside div */
div > p   /* p directly inside div */

Adjacent Sibling +

The + selector selects the element that comes immediately after another element.

<h2>Heading</h2>
<p>Hello</p>
<p>World</p>

h2 + p {
    color: red;
}

Only Hello is selected because it is immediately after the <h2>.

General Sibling ~

The ~ selector selects all matching siblings that come after an element.

h2 ~ p {
    color: blue;
}

If there are three <p> elements after the <h2>, all three will be selected.

The difference is:

h2 + p   /* only the next p */
h2 ~ p   /* all p elements after h2 */

---

2. Attribute Selectors

Attribute selectors are very useful when working with forms, links and images.

[attribute]

This selects elements that have a particular attribute.

<input required>
<input>

input[required] {
    border: 2px solid red;
}

Only the input with the required attribute is selected.

[attribute="value"]

We can also select an element based on the value of its attribute.

<input type="text">
<input type="password">

input[type="text"] {
    background-color: lightblue;
}

Only the text input is selected.

There are also some useful variations:

a[href^="https"]   /* href starts with https */

img[src$=".jpg"]   /* src ends with .jpg */

a[href*="google"]  /* href contains google */

These become very useful when working with many elements that have different attributes.

---

3. Pseudo-Classes

Pseudo-classes select an element based on its state or position.

:hover

:hover is applied when the mouse pointer is over an element.

button:hover {
    background-color: black;
    color: white;
}

This is commonly used for buttons and links.

:focus

:focus is useful for input fields. It works when the user clicks on an input or moves to it using the keyboard.

input:focus {
    border: 2px solid blue;
}

This makes it easier for the user to know which input they are currently using.

:active

:active works while an element is being activated, such as while pressing a button.

button:active {
    transform: scale(0.95);
}

This can make a button look like it is being pressed.

:first-child

Selects an element if it is the first child of its parent.

<div>
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
</div>

p:first-child {
    color: red;
}

One becomes red because it is the first child.

:last-child

Works in the opposite way.

p:last-child {
    color: blue;
}

Three becomes blue because it is the last child.

:nth-child()

This selector is very useful when we want to select a child based on its position.

li:nth-child(2) {
    color: red;
}

This selects the second <li>.

We can also use:

li:nth-child(odd) {
    background-color: lightgray;
}

li:nth-child(even) {
    background-color: white;
}

This is commonly used for tables and lists.

We can even select every third item:

li:nth-child(3n) {
    color: red;
}

So :nth-child() is a very useful selector when working with lists, grids and tables.

:not()

:not() means except this.

p:not(.special) {
    color: gray;
}

This selects all <p> elements except the ones having the special class.

It is useful when we want to style almost everything but leave a few elements different.

:is()

:is() allows us to group selectors.

Instead of:

h1,
h2,
h3 {
    color: blue;
}

We can write:

:is(h1, h2, h3) {
    color: blue;
}

This is especially useful when selectors become complicated.

:has()

:has() is a powerful modern selector. It allows us to select an element based on something inside it.

For example:

<div class="card">
    <img src="photo.jpg">
    <h2>My Card</h2>
</div>

.card:has(img) {
    border: 2px solid blue;
}

The .card is selected because it contains an <img>.

This is useful when we want to style a parent depending on what it contains.

:checked

This is useful for checkboxes and radio buttons.

<input type="checkbox">

input:checked {
    accent-color: green;
}

The style is applied when the checkbox is checked.

:disabled

Used to select disabled form elements.

button:disabled {
    opacity: 0.5;
}

This can make a disabled button look different from a normal button.

---

4. Pseudo-Elements

Pseudo-elements allow us to style a specific part of an element or add generated content.

::before

::before adds content before the element's actual content.

h2::before {
    content: "★ ";
}

If the HTML contains:

<h2>My Heading</h2>

It can appear like:

★ My Heading

It is commonly used for icons, decorations and shapes.

::after

::after does the same thing but adds the generated content after the element.

h2::after {
    content: " →";
}

It can appear like:

My Heading →

::before and ::after are very useful for creating small decorative elements without adding extra HTML.

::first-letter

Selects the first letter of a text element.

p::first-letter {
    font-size: 40px;
    font-weight: bold;
}

This can be used to create a large first letter like we sometimes see in magazines and articles.

::selection

This controls how text looks when the user selects it with the mouse.

::selection {
    background-color: black;
    color: white;
}

Now selected text will have a black background and white text.

---