CSS Pseudo-classes
CSS Pseudo-classes
Link related pseudo-classes.
1 2 3 4 |
a:link {color:#cfcfcf;} => unvisited link a:visited {color:#DBDBDB;} => visited link a:hover {color:#cfcfcf;} => mouse over link a:active {color:#DBDBDB;} => selected link |
Let’s take then closely:
:link – This matches only those links that have a “href” attribute, so it is essentially to specify one for the link in order to work with this pseudo-class.
:visited – Matches and add style on the links that have already been visited by the user’s browser.
:hover – When you roll over a link or any other element that have this class applied, his properties are applied.
:active – Matches the link while it is being activated (when it is clicked on or otherwise activated).
The :first-child and :last-child pseudo-classes.
The :first-child pseudo-class matches a specified element that is the first child of another element. Let’s see an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <style> p:first-child { font-weight:bold; } </style> </head> <body> <p>I will be bolded</p> <p>I won't be bolded</p> </body> </html> |
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
:last-child – Selects the last element of its type within a parent (reverse of the above example).
The :focus pseudo-class.
Imagine the next situation: You are browsing from a mobile device. You don’t have a hover state there, so you have to use something instead. :focus will select links that are the current focus of the keyboard. This is not limited to links, but can be used on inputs and textarea elements as well.
Other pseudo-classes.
:enabled – Selects inputs that are in the default state of enabled and ready to be used.
:disabled – Selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector and add style for it.
:nth-child(N) – Matches elements that are inside as a parameter. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 2nd element:
Example: :nth-child(2);
:not(S) – Removes elements from an existing matched set that match the selector inside the parameter of :not(). So for example, all divs except those with a class of “even”
Example: div:not(.even).
:empty – Matches elements which contain no text and no child elements.
Example: <span></span>
:first-letter – Selects the first letter of the text in the element.
:before – It is able to add content before a certain element. You can add a dash or line before every li element or so.
:after – Is able to add content after a certain element.
These are only a part of the available css pseudo-classes. There are lots of them, but I think I covered the most important ones (or at least the most used ones).
Don’t forget to subscribe and comment below.