Course: CSS Basics

Advanced Selectors [3/15]

Yet more complex selectors are those using classes and pseudo-classes.

Using classes you can combine elements into semantic groups and style them in a similar way. For example, you can create a class for erroneous elements and set the red text color for it. Then, you can assign this class to any HTML tag of your choice: i.e., to a paragraph, a heading, a list item, etc.

You can set a class for a tag using the class attribute containing the name of the class (or several class names space-separated). Here is an example:

<p class="help"></p>
<p class="help error"></p>

As you can see from the example, the first paragraph is assigned the help class, while the second paragraph is assigned the help and error classes.

Class selectors are defined as .class_name. For example:

.help { ... }
.error { ... }

To learn about selectors in more detail, welcome to the "Selectors" course.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Advanced Selectors</title> </head> <body> <h1>Some more sophisticated selectors</h1> <p>Somewhat more advanced selectors are:</p> <ul> <li>Class selectors</li> <li>Pseudo-class selectors</li> <li>Tag selectors</li> <li>id selectors</li> </ul> <p>Using class selectors is a good practice.</p> </body> </html>
HTML Academy

Create a CSS rule to highlight errors; then, apply the rule to elements with errors:

  1. Add a CSS rule for the error class with the color: red; property.
  2. Add the error class to the third element of the list.
  3. Add the same class to the second paragraph as well.

A more detailed introduction into selectors is given in the "Selectors" course.

Theory Check Next