In This Lesson You Will Learn
Certainly, you are already familiar with a number of pseudo-classes and pseudo-elements that you can use very nicely to “automate” graphic tasks. There are, for instance, the pseudo-elements ::before and ::after that you can use to attach text or graphics to existing HTML elements, or the :nth-child(n) pseudo-class that you can use to design elements individually in the document based on their position.
CSS3 offers you yet another few pseudo-formats that you can use to achieve interesting effects. These include, for instance, the pseudo-classes :checked and :target as well as the ::selection pseudo-element. I would like to present these three formats to you below.
You will find the examples and exercises together in the css3_advanced folder as part of the support material for this course. To ensure a consistent design for the examples and exercises, some styles are stored in external CSS files (design folder in the styles folder), which are shared by several exercises. These files are not directly relevant to the exercises. But you should retain the folder structure.
We will start with a simple example. One small, yet smart new option available in CSS3 is to define your own colors for highlighted text and adapt them to your own design concept. To do this, you simply insert the ::selection pseudo-element in your CSS definitions (adding the vendor prefix for Firefox), and assign a background color and (optionally) another text color, e.g.:
If there is no specific selector in front of it, the selection specified applies to the whole document. If you want to restrict the selection color to a particular element, insert, for instance, instead:
or
You will find exercise files for you to try out these options under
css3_advanced/selection.html and
css3_advanced/styles/selection.css.
Demo mode: Learning progress will not be saved.