Demystifying Basic CSS Selectors

Introduction

Have you ever struggled with the basic selectors in Cascading Style Sheets(CSS)? Here's a quick guide on how to use them.

What are selectors?

CSS selectors are patterns used to choose and style HTML elements.

Universal Selector

The universal selector is used to select and style all of the elements within an HTML document. It is represented with in CSS with an asterisk(*).

/* CSS */
* {
    background-color: blue;
}

id Selector

On the other hand, the id selector will style all of the elements that have a given id attribute. It is represented with a hashtag(#).

/* CSS */
#test {
    background-color: blue;
}

<!-- HTML -->
<div id="test">
    This is a div with an id selector
</div>

In the above example, all elements with the id = "test" will be styled accordingly.

Class Selector

The class selector will style HTML elements based on their class attribute. It is represented with a period(.).

/* CSS */
.test {
    background-color: blue;
}

<!-- HTML -->
<div class="test">
    This is a div with a class selector
</div>

In the above example, all elements with a class attribute of test will be styled according to the class selector named test.

Type Selector

This selector works by styling all of the elements of a given name.

/* CSS */
p {
    background-color: blue;
}

<!-- HTML -->
<div >
    <p>Paragraph</p>
    <span>Span</span>
    <p>Paragraph</p>
    <span>Span</span>
</div>

Following the above example, all paragraph(<p>) elements within the HTML document will be styled accordingly.

Pseudo-Classes

These selectors allow for the selection of elements based on state information not contained in the document tree. This state information can be based on navigator history, status of content, the position of the mouse or the element's position in the DOM tree. Here is a comprehensive list of CSS pseudo-classes

/* CSS */
button:hover {
    color: gray;
}

The above example shows how a button element will be stylised as gray whenever the user hovers with a mouse.

Pseudo-Elements

Allow for the styling of specific parts of an HTML element

/* CSS */
p::first-letter {
    color: red;
}

<!-- HTML -->
<div >
    <p>Paragraph</p>
</div>

This will style the first letter of a <p> element with the color red. Here is a comprehensive list of pseudo-elements.

NOTE: If you are concerned with accessibility, caution should be used when adding content with pseudo-elements, for example, using the ::before selector to add content before an element, as this content may not be available to screen readers.

Bonus

You might be wondering how to select an element that is a descendant of another element in the tree. This can be done using the descendant combinator, where an empty space, " ", is used to separate two selectors. Elements that match the second selector are chosen only if their ancestor matches the first selector.

<!-- HTML -->
<div id="testId">
  <p>No combinator</p>
  <p class="testClass">Descendant combinator</p>
</div>

/* CSS */
#testId .testClass {
    color: green
  }

The result is shown below.

Only the second <p> element is stylised as green using a descendant combinator.

Conclusion

I hope this quick guide helps to clarify any confusion you might have regarding basic CSS selectors.

References

1. MDN