Nov 10, 2018

Pseudo-class selectors of CSS

pseudo-class selector is a way of accessing HTML items that aren't part of the document tree. For instance, it's very easy to see where a link is in the tree. But where would you find information about whether a link had been clicked on or not? It isn't there!

Pseudo-class selectors let us style these kinds of changes in our HTML document. For example, we saw we could change a link's text-decoration property to make it something other than blue and underlined. Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked.

The CSS syntax for pseudo selectors is
selector:pseudo-class_selector { property: value; } 
It's just that little extra colon (:).

There are a number of useful pseudo-class selectors for links, including:
a:link: An unvisited link.
a:visited: A visited link.
a:hover: A link you're hovering your mouse over.

Another useful pseudo-class selector is first-child. It's used to apply styling to only the elements that are the first children of their parents. For instance:
p:first-child {
color: red;}
Would make all paragraphs that are the first children of their parent elements red.