An Introduction to Functional Pseudo-classes in CSS

Introduction

Contrary to popular belief, CSS is actually one of the most powerful specification language for the web. Notice how I referred to CSS as a specification language and not a programming language? Well, that is because a lot of argument is still ongoing regarding whetherHTML and CSS should be considered as programming languages, and the jury is still out on that decision.

Although there are many important aspects to writing CSS codes such as media queries, CSSRules, Keyframes and animations, the aspect of CSS which we would be focusing on in this guide are Pseudo-classes. A Pseudo-class is a keyword added to a CSS selector to define the special state of an element upon fulfilling a particular condition. The most common pseudo-class in CSS is the “:hover” selector which can be used to change the styles of an element upon hover. An example is cited below:

.button{
    color:white;
    background:black;
    width:200px;
    height:80px;
    border-radius:10px;
    margin:auto;
    transition:width 1s;

}

.button:hover{
    color:black;
    background:white;
    width:310px
}

The code above changes the background color of the black button white text to a white outline button with black text on hover. The hover serves as a pseudo class to the button class stating a condition for which the button state should change.

In this article, we would be focusing on functional CSS pseudo-classes and understanding their dynamic use cases.

Introducing :is() and :where()

:is() and :where() are the two most popular functional pseudo-classes in CSS. Using these pseudo-classes, you can group elements in the middle, beginning or end of a selector. They can also change specificity, giving you the ability to add or remove styles from an element.

Consider the example below:

<body>
    <div id="div">

        <h1>Hello</h1>
        <h2><b>Darkness </b></h2>
        <h3>My</h3>
        <h4>Old</h4>
        <h5>friend</h5>
    </div>

</body>

Assuming I would like to change the color of each element to blue, with normal css, I would need to write:

h1,h2,h3,h4,h5,h6 {
    color: blue
  }

However, suppose I would like to only change the color of Darkness which has a bold tag, I can do that using the :where() selector:

:where(h1,h2,h3,h4,h5,h6) > b {
    color: blue;
  }

You can also get the same result using :is()

:is(h1,h2,h3,h4,h5,h6) > b {
    color: blue;
  }

:is() and :where() can also appear at the middle or end of a CSS selector as shown below:

  /* in the middle */
  .content :is(header,footer) > h1,h2,h3 {
    color: orange;
    font-size:19px
  }

  /* at the end */
  .container :where(.button,a) {
    background: pink;
    color:white
  }

The Major Difference between :is() and :where()

:is() and :where() are largely interchangeable, however:

• :where() has no specificity – the specificity of :where() and all its arguments are always zero • :is() takes the specificity of its most specific selector. For instance, :is(a,div,#id) has a specificity score of 100 points.

Conclusion

In this article, we were introduced to the concept of functional pseudo-classes in css. We explored how this concept can be used to add specificity to elements of a web page. Finally, we considered the difference between the :is() and :where() pseudo-classes. I hope you find this guide to be a comprehensive first step to writing smarter, cleaner css codes.

Tobi's Dev Log ✌🏼