DEV Community

Cover image for Demystifying Basic CSS Selectors
Farai Bvuma
Farai Bvuma

Posted on

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.

Selector Symbol
universal *
id #
class .
type element
pseudo-class :
pseudo-element ::

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
<!-- HTML -->
<div id="test">
    This is a div with an id selector
</div>
Enter fullscreen mode Exit fullscreen mode

Id selector

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;
}
Enter fullscreen mode Exit fullscreen mode
<!-- HTML -->
<div class="test">
    This is a div with a class selector
</div>
Enter fullscreen mode Exit fullscreen mode

Class selector

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;
}
Enter fullscreen mode Exit fullscreen mode
<!-- HTML -->
<div >
    <p>Paragraph</p>
    <span>Span</span>
    <p>Paragraph</p>
    <span>Span</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Type selector

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;
}
Enter fullscreen mode Exit fullscreen mode

Mouse hover

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;
}
Enter fullscreen mode Exit fullscreen mode
<!-- HTML -->
<div >
    <p>Paragraph</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Pseudo-element selector

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>
Enter fullscreen mode Exit fullscreen mode
/* CSS */
#testId .testClass {
    color: green
  }
Enter fullscreen mode Exit fullscreen mode

The result is shown below.

Descendant combinator

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

Top comments (0)