In this last selector tutorial, I will introduce you to a very special type of selector. These are so-called pseudo-classes and pseudo-elements. These are selectors that do not refer to specific HTML elements, but are generated by the output device.
Pseudo-classes and pseudo-elements can be used to define declarations for HTML components that cannot be clearly described by an HTML element. Typical examples are a hyperlink that has just been clicked on or a hyperlink that has not yet been visited.
Designing hyperlinks
Very often you want to design the hyperlinks on the page. CSS provides numerous options for this, which can be used to address the different states of hyperlinks and ultimately customize them visually.
For example, if you want to assign a red color to a hyperlink, it would look like this:
a:link { color: red; }
With a:visited, on the other hand, hyperlinks that have already been visited are marked. The following syntax can be used to display hyperlinks that have already been clicked on in blue.
a:visited { color:blue; text-decoration:none; }It looks like this in the browser:
If you want to design hyperlinks that are currently being clicked on separately, this is also possible.
a:active { font-weight: bold; color: blue; text-decoration: none; }
The syntax a:active is used for this.
The syntax a:hover, on the other hand, refers to the state in which the mouse pointer is moved over the hyperlink. In addition, there is another pseudo element with a:focus. This describes the moment at which the hyperlink receives the focus.
Further pseudo elements
There are pseudo elements that can be used to address parts of other elements. A typical example of this is ::first-letter. This pseudo element selects the first character of the current element. It can be used for all elements that contain text. But beware: pseudo elements may only be noted at the end of all selectors. They must therefore be placed before the opening curly bracket.
h1::first-letter { color: blue; }
The first line of an element can be addressed via ::first-line. This pseudo element is only applicable to block-level elements. An example:
p::first-line { background-blue; }
And here is the result in the browser:
on
The two pseudo elements :after and :before can be used to display additional content before and after an element. Content determines what is to be displayed.
- normal - the pseudo element defined in the rule is not generated.
- none - the pseudo element is not generated.
- <string> - the character string specified here is output. Strings must be enclosed in single or double quotation marks.
- <uri> - the resource specified under the URI is inserted.
- <counter> - defines a counter or addresses a specific counter.
- attr(<identifier>) - the value of the attribute specified in brackets is inserted.
- close-quote - inserts a closing quotation mark.
- no-close-quote - no closing quotation mark is inserted, but the nesting depth is increased by one.
- no-open-quote - no opening quotation mark is inserted, but the nesting depth is increased by one.
- open-quote - an opening quotation mark is inserted.
An example:
ul li:before { content: uri("bullet.gif"); }
CSS3 also introduced the :not pseudo selector. This makes it very easy to select specific content. A first example should show how powerful this pseudo selector actually is. Let's assume you want to select all hyperlinks that do not have an href attribute. The corresponding syntax would look like this:
a:not([href])
"Normal" hyperlinks would remain unaffected by this syntax. However, access to anchor definitions would be possible.
<a name="top">Begin of page</a>
A somewhat more detailed example should illustrate the performance of :not. Various text paragraphs have been defined within a document.
<body> <h1>PSD-Tutorials.de</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is a text area.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
In addition to text paragraphs marked with p, there is also a div area and a hyperlink. Now the following should happen:
- All paragraphs marked with p get a black font color.
- Wherever there are no p-paragraphs, red is used as the font color.
The corresponding CSS syntax looks like this:
p { color:#000; } :not(p) { color:#ff0000; }The principle of inheritance
One of the most important things when it comes to understanding CSS definitions is inheritance. In fact, in CSS, style properties are inherited from one element to the other.
For example:
html { color: red }This definition assigns the foreground color red to the html element.
Due to the inheritance principle, this color definition now also applies to all elements that are subordinate to html. This means that all elements below html are displayed in red by default. The advantage of this variant is that you do not have to explicitly define red as the color for these elements. But what if the content of p-paragraphs should not be displayed in red? Then you have to overwrite the higher-level color definition of html.
html { color: red; } p { color: #000; }
What happens if there are now two elements p and div?
<body> <p>PSD-Tutorials.de</p> <div>World</div> </body>
The result looks like this:
The color definition of html only affects the content of div. The p-paragraph, on the other hand, is displayed in black.
There are different ways to set style definitions in CSS. This is also the reason why there may be contradictory instructions for an element. CSS provides a weighting principle for such cases. This principle determines which of the instructions for an element have priority. I don't want to go into great detail about this principle here. However, you can find detailed information on this at http://wiki.selfhtml.org/wiki/CSS/Kaskade or at http://www.thestyleworks.de/basics/cascade.shtml.
My aim is to show you what you need to pay attention to when defining CSS properties. The following example serves this purpose:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> body { font-family:Arial, Helvetica, sans-serif; font-size: 90%; } p { color: #000; } h1 { font-size: 120%; font-weight: normal; } strong { color:#CCCCCC; } h2 strong { color: red; } </style> </head> <body> <div> <h1>PSD-Tutorials.en</h1> <p>This is a paragraph with a <strong>bold word</strong>.</p> <h2>This is a heading with a <strong>bold word</strong>.</h2> </div> </body> </html>In the browser, it looks like this:
As you can see, the words marked with strong, for example, are formatted differently. Which type of formatting is used ultimately depends on the order of the definitions.
Alternatively, there is also the keyword !important, which you can use to mark a CSS statement as particularly important.
<style> body { font-family:Arial, Helvetica, sans-serif; font-size: 90%; } p { color: #000; } h1 { font-size: 120%; font-weight: normal; } strong { color:#CCCCCC !important; } h2 strong { color: red; } </style>Again, take a look at the result:
In this context, be sure to read through the sources mentioned in this tutorial again. (Even if you certainly don't need to delve too deeply into this topic to begin with).
