CSS Selectors: Learn the Most Important Things

CSS selectors are an essential part of styling web pages. They allow us to associate declarations with specific HTML elements. In this blog, we will discuss the basics of selectors, how to combine and group them, and explore some advanced selectors as well.

Basic Selectors

A selector, such as p, targets all elements with the corresponding HTML tag. For example, to display words in a p element using the yellow color, we can write the CSS rule:

1
2
3

p {
    color: yellow;
}

Every HTML tag has its corresponding selector, such as div, span, or img. If a selector matches multiple elements, all of them will be affected by the style change.

There are two commonly used attributes within CSS to associate styling with specific elements: class and id. The main difference between them is that a class value can be repeated across multiple elements, whereas an id can only be used once. To select an element with a specific class, we use the . symbol, and for an id, we use the # symbol.

For example, to select an element with the class “dog-name”:

1
2
3

<p class="dog-name">
    Roger
</p>

1
2
3

.dog-name {
    color: yellow;
}

To select an element with the id “dog-name”:

1
2
3

<p id="dog-name">
    Roger
</p>

1
2
3

#dog-name {
    color: yellow;
}

Combining Selectors

We can combine selectors to target elements with multiple attributes or classes for more specificity.

To select a specific element with a class, we can use:

1
2
3

<p class="dog-name">
    Roger
</p>

1
2
3

p.dog-name {
    color: yellow;
}

To select a specific element with an id, we can use:

1
2
3

<p id="dog-name">
    Roger
</p>

1
2
3

p#dog-name {
    color: yellow;
}

Combining classes is also possible by separating the class names with a dot:

1
2
3

<p class="dog-name roger">
    Roger
</p>

1
2
3

.dog-name.roger {
    color: yellow;
}

We can combine a class and an id as well:

1
2
3

<p class="dog-name" id="roger">
    Roger
</p>

1
2
3

.dog-name#roger {
    color: yellow;
}

Grouping Selectors

Selectors can be grouped together to apply the same styles to multiple selectors. To do this, simply separate them with a comma.

For example:

<p>
    My dog's name is:
</p>
<span class="dog-name">
    Roger
</span>

1
2
3

p, .dog-name {
    color: yellow;
}

Following the Document Tree with Selectors

We can create more specific selectors by following the document tree structure. For example, to target a span element inside a p element without applying the style to any other span elements, we use the space selector:

<span>
    Hello!
</span>
<p>
    My dog's name is:
    <span class="dog-name">
        Roger
    </span>
</p>

1
2
3

p span {
    color: yellow;
}

To strictly target the first level of dependency, we can use the > symbol:

1
2
3

p > span {
    color: yellow;
}

This style will only be applied to span elements that are direct children of p elements.

Adjacent sibling selectors allow us to style an element only if it is preceded by a specific element.

1
2
3

p + span {
    color: yellow;
}

For example, the above selector will assign the yellow color to all span elements preceded by a p element.

These are just a few of the basic CSS selectors. There are also attribute selectors, pseudo-class selectors, and pseudo-element selectors that we will cover in future posts.

tags: [“CSS Selectors”, “CSS Basics”, “Web Development”]