CSS Selectors

📢 This article was translated by gemini-2.5-flash

How to Include CSS

There are three ways to include CSS. The first is internal stylesheets, typically used for learning only.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<html>
    <head>
        <title></title>
        <style>
            /* Write CSS here */
        </style>
    </head>
    <body>
    </body>
</html>

The second is inline styles, usually paired with JavaScript.

1
<div style="Write CSS here"></div>

The last method is external stylesheets. You write CSS in a separate file and link it using a link tag. This is common practice in development.

1
2
3
4
<head>
    <title></title>
    <link rel="stylesheet" href="css path" />
</head>

CSS Selectors

Selectors are used to find elements and apply styles. There are four basic selector types.

Element Selectors

Use the element (tag) name directly as the selector. This applies the same style to all elements with that name.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html>
    <head>
        <title></title>
        <style>
            div{
                /* Selects all <div> tags and applies styles */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Common elements you can use include p, h1, div, a, img, etc.

Class Selectors

Used to find elements and apply different styles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <title></title>
        <style>
            .first{
                /* Selects the div with class 'first' and applies styles */
            }
        </style>
    </head>
    <body>
        <div class="first">
            first div
        </div>
        <div>
            second div
        </div>
    </body>
</html>

If a class name has multiple words, use a hyphen (-) to connect them. A single class selector can be used by multiple elements, and one element can have multiple class names.

1
2
3
<div class="first second">
    Using two class names
</div>

ID Selectors

Used to find elements and apply different styles, usually in conjunction with JavaScript.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
    <head>
        <title></title>
        <style>
            #app{
                /* Selects the element with id 'app' */
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <div></div>
    </body>
</html>

An ID selector should only be used once per page.

Universal Selectors

Selects all elements on the page and applies the same style. Commonly used to clear default browser styles.

1
2
3
4
5
<style>
    *{
        /* Styles written here affect all elements */
    }
</style>

Combinator Selectors

Definition: Formed by combining two or more basic selectors in different ways.

Purpose: To select target elements (tags) more precisely and efficiently.

Descendant Selectors

Can select all descendant elements of a specific element.

Syntax: parent-selector descendant-selector { CSS properties }

Parent and child selectors are separated by a space. They can be class or ID selectors.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<style>
    div span{
        color: aqua;
    }
</style>

<span>Color won't change</span>
<div>
    <span>Color will change</span>
    <p>
        <span>Color will change</span>
    </p>
</div>

Child Selectors

Only selects direct child elements of a specific element.

Syntax: parent-selector > child-selector { CSS properties }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<style>
    div > span{
        color: aqua;
    }
</style>

<div>
    <span>Color will change</span>
    <p>
        <span>Color won't change</span>
    </p>
</div>

Grouping Selectors

Selects multiple sets of elements to apply the same styles.

Syntax: selector1, selector2, ..., selectorN { CSS properties }

1
2
3
4
5
6
7
8
9
<style>
    div, span, p {
        color: aqua;
    }
</style>

<div>Color will change</div>
<p>Color will change</p>
<span>Color will change</span>

Chained Selectors

Selects elements that meet multiple conditions simultaneously.

Syntax: selector1selector2 { CSS properties } Selectors are written consecutively, with no symbols in between.

If a chained selector includes an element selector, the element selector must be written first.

1
2
3
4
5
6
7
8
9
<style>
    p.box {
        color: aqua;
    }
</style>

<p class="box">Color will change</p>
<p>p tag, color won't change</p>
<div class="box">Color won't change</div>

Pseudo-class Selectors

Pseudo-classes represent an element’s state, letting you style an element based on its current state.

Hover State

Syntax: selector:hover { CSS properties }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<style>
    a:hover{
        color: red;
    }
    .box:hover{
        color: aqua;
    }
</style>

<a href="https://yexca.net">yexca</a>
<div class="box">
    div tag
</div>

Any element can have a hover state applied.

Anchor Link States

Selector	Purpose
:link	Before visit
:visited	After visit
:hover	Mouse hover
:active	While clicking (active)

If you’re styling all four states for an anchor link, they should be written in this order.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<style>
    a:link {
        color: green;
    }
    a:visited {
        color: red;
    }
    a: hover {
        color: aqua;
    }
    a: active {
        color: orange;
    }
</style>

<a href="#">a tag</a>

Structural Pseudo-class Selectors

Purpose: Select elements based on their structural relationship.

Selector	Description
E:first-child	Selects the first E element.
E:last-child	Selects the last E element.
E:nth-child(N)	Selects the Nth E element (starting from 1).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<style>
    li:first-child {
        background-color: aqua;
    }
    li:last-child {
        background-color: green;
    }
    li:nth-child(3) {
        background-color: blue;
    }
</style>

<ol>
    <li>aqua</li>
    <li>2</li>
    <li>blue</li>
    <li>4</li>
    <li>green</li>
</ol>

For the third selector, you can use formulas to select multiple elements.

Function	Formula
Even-numbered elements	2n
Odd-numbered elements	2n+1 or 2n-1
Find elements that are multiples of 5	5n
Find elements from the 5th onwards (inclusive)	n+5
Find elements up to the 5th (inclusive)	-n+5

Pseudo-element Selectors

Purpose: Create virtual elements (pseudo-elements) to display decorative content.

Selector	Description
E::before	Adds a pseudo-element before the content of the E element.
E::after	Adds a pseudo-element after the content of the E element.

Note:

You must set the content property to define the pseudo-element’s content. If there’s no content, leave the quotes empty.
Pseudo-elements are inline by default.
Their priority is the same as element selectors.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<style>
    div {
        width: 110px;
        height: 30px;
        background-color: aqua;
        font-size: 20px;
    }
    div::before {
        content: 'yexca';
    }
    div::after {
        content: 'blog';
    }
</style>

<div>'</div>
<!-- Content will be yexca'blog -->