CSS Selectors: Precision in Web Styling

Azubuike Chima FrancisAzubuike Chima Francis
7 min read

Table of contents

Selectors are ways to pick or target HTML elements to receive CSS rules. Selectors match against elements in a tree. It is the first part of a CSS rule.

In this article, we will look at three ways to target and style our HTML.

  1. Simple selectors
    • Type selector (E)
    • Universal selector (*)
    • Class selector (.)
    • Id selector (#)
    • Attribute selector ([])
    • Pseudo-class selector (:)
    • Pseudo-element selector (::)
  2. Complex selectors
    • Descendant selector (E F)
    • Child selector (E > F)
    • Next sibling selector (E + F)
    • Subsequent/Adjacent sibling selector (E ~ F)
  3. Compound selectors
    • Grouping s elector

At the end of this article, you will have a good understanding of the various types of CSS selectors. The syntax, and how to use them effectively to target and style HTML elements.

Prerequisites

You need a good knowledge of the following, for a better understanding of this article:

  • HTML basics
  • CSS basics
  • Have a text editor installed in your computer
  • Web browser developer tools

Type selector

Type selector is also called tag selector. It target elements by their node names. This implies that targeting respective element name in your HTML, you can apply CSS rule to it.

h1{
color: red;
}

span{
font-size:1rem;
}

p{
color: blue;
}

Universal selector

Just as the name imply, Universal selector target every html element in your document. It is denoted by the asterisk symbol (*). 

*{
Margin: 0;
padding: 0;
color: red;
}

Class selector

Every HTML element has an attribute. Class is one of the many attributes that html elements can have. When the value of class attributes is used to target HTML element, this is called class selector. One element can have more than one class name (the value of the name attribute). Different elements can have the same class name. It is denoted by period or dot (.).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. At numquam eos magnam facere facilis nisi animi culpa distinctio unde, similique consequuntur ducimus et nemo repellat, a iusto ullam provident. Distinctio.
        </p>
        <span>Hello there!!!</span>
    </div>
</body>
</html>

.wrapper{
color: red;
}
// Every element with the class of wrapper will have a color of red.

ID selector

Id selector is similar to the class selector. Id is also a HTML attribute. Unlike the class attribute, an Id is unique. This means that two elements can't have the same Id. It is considered the most powerful CSS selector in terms of specificity. Id is denoted by hash symbol (#).

#happy-cake{
padding: 10px;
}

Attribute selector

HTML elements can be targeted using their attribute. Attribute selector is denoted by the squared bracket ([]). There is a vast array of methods available when using attribute selector. We will take a look at them below.

[foo]

This targets all HTML element with foo attribute.

[foo = "href"]

This target all HTML element with a foo attribute whose value is exactly equal to href

[foo = ^"http"]

This target all HTML element with a foo attribute whose value start with http. The begins with attribute selector is denoted by the caret (^) symbol.

[foo = $"com"]

This target HTML element with foo attribute whose value ends with com. The ends with attribute selector is denoted by the dollar sign (#).

[foo =*"bars"]

This target HTML element with foo attribute whose value contain the substring bars. The contains attribute selector is denoted by the asterisk (*) symbol.

[foo = "href" i]

This target HTML element with foo attribute whose value is href. The value is case-insensitive. This means the element will be targeted if the attribute value is HREF or href. Case-insensitive attribute selector is denoted by the (i) letter.

[foo ="href" s]

This is the opposite of the previous attribute. This rule target HTML element with foo attribute whose value is href. The attribute vale is case-sensitive. If you select HREF instead of href, the style won't be applied. The case-sensitive attribute is denoted by (s) letter.

Pseudo-class selector

Pseudo-class selector is used to target element based on a state change. It is denoted by colon (:). Every state change you can think of on a HTML element, has it corresponding pseudo-class.

h1:active{
}

.wrapper:target{
}

:hover{
}

Pseudo-element selector

The pseudo-element are elements that are not present in HTML. It could be considered as fake elements. Pseudo element is donated by double colon (::).

::marker{
background-color: red;
color: black;
}

p::first-line{
font-size: 3rem;
}

Complex Selectors

This is a combination of simple selectors. This selectors are separated by a combinator and white space. Below are examples of complex selectors.

Descendent selector

Descendent selector is used to target elements that are child of another element. This selector target both direct and indirect children of an element. It is donated by single or space (div p).

div  p{
}

p  span{
color: blue;
}

Child selector

The child/direct-child selector is used to target elements that are direct child of another element. This selector can not target nested element. It is denoted by the greater than symbol (>).

.warpper > header{
height: 8vh;
} // This target the header element that is a direct child 
  //  to the element with a class of wrapper.

div > p{
margin-top: 13px;
} //This target all p element that are direct child of the div element

Next sibling selector

The next sibling selector is used to target elements that have the same parent element. The latter element must be the direct sibling of the former element. This selector is denoted by the addition symbol (+).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. At numquam eos magnam facere facilis nisi animi culpa distinctio unde, similique consequuntur ducimus et nemo repellat, a iusto ullam provident. Distinctio.
        </p>
        <span>Hello there!!!</span>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor esse dolorum explicabo consectetur? Nostrum illo, facere dignissimos obcaecati, nemo beatae molestiae assumenda quod ut laborum quisquam id qui nihil ullam?</p>
    </div>
</body>
</html>

span + p{
color: red;
} 

section + div{
width: 60px;
}

The <div> with the wrapper class has three direct children. The second <p> element is a direct sibling to the <span> element. It will have a color of red.

Subsequent/Adjacent sibling selector

Subsequent sibling selector target elements that are children of the same element. The later of the element is a sibling of the former element. The position of the later element is not important. This means that the later element must not be the direct sibling. It is denoted by tilde (~) symbol.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. At numquam eos magnam facere facilis nisi animi culpa distinctio unde, similique consequuntur ducimus et nemo repellat, a iusto ullam provident. Distinctio.
        </p>
        <span>Hello there!!!</span>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor esse dolorum explicabo consectetur? Nostrum illo, facere dignissimos obcaecati, nemo beatae molestiae assumenda quod ut laborum quisquam id qui nihil ullam?</p>
    </div>
</body>
</html>

.p ~ p{
color:red;
}

The second <p> in the HTML example above will have a color of red. It is not the direct sibling of the first <p> element. The <span> element is. They all share the same parent which is the <div> with the class of wrapper.

Compound selector

A compound selector is a combination of simple selectors that is not separated by a combinator or a whitespace. In compound selector, only one type or universal selector is allowed. The type selector or universal selector must come first before any other selector. Take a look at the example bellow.

span.selected{
border: 2px solid red;
}

footer.site-footer{
font-size: 8px;
}

Grouping selector

Grouping selector is a type of compound selector that combines multiple selectors separated by comma (,). This selector is used to group different selectors and give them the same style.

h1,    /* Selects all <h1> elements */
.span, /* Selects all elements with class="span" */
#testing /* Selects the element with id="testing" */
{
    /* Styles applying to h1, .span, and #testing */
    color: blue;
    font-size: 16px;
    /* Add more styles as needed */
}

conclusion

Selectors is a powerful concept in CSS. A good understanding of CSS gives you the power to target and style your HTML effortlessly. It gives you the ability to achieve breathe-taking user experience designs that meet and exceed user expectations.

Thank you for reading.

10
Subscribe to my newsletter

Read articles from Azubuike Chima Francis directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSSCSS3HTML5selectors

Written by

Azubuike Chima Francis
Azubuike Chima Francis