Pseudo Selectors
Let's round out our look at selectors with one you will use on every site you create. It is a pseudo selector and you have seen it thousands of times as you peruse the web. This pseudo selector is what allows us to apply CSS styling to links, specifically the default, hover, active, and visited states. By default, most browsers style links in blue with an underline. Links that are visited (meaning the user has clicked the link and come back to the page) are purple, and the active state (when the mouse has clicked the link, but not released) is red. There is no default hover style. As designers, we want to apply our own styles to these states rather than using browser default values.
The selector is called "pseudo" because these 4 states are not real objects in the DOM; they happen dynamically at the user's direction. It sounds complex, but they are relatively easy to use. This selector usually gets applied to an anchor <a>, but can be placed on other elements as well. Common use would be:
a:link {declaration}
a:hover {declaration}
a:active {declaration}
a:visited {declaration}
You can use these for other elements, for example:
li:hover {declaration}
This is commonly used when you use unordered list for navigation. Rather than declare the hover state for <a> you can define li. You will see examples later.
There are other pseudo elements and pseudo classes, below are just some examples.
The selector is called "pseudo" because these 4 states are not real objects in the DOM; they happen dynamically at the user's direction. It sounds complex, but they are relatively easy to use. This selector usually gets applied to an anchor <a>, but can be placed on other elements as well. Common use would be:
a:link {declaration}
a:hover {declaration}
a:active {declaration}
a:visited {declaration}
You can use these for other elements, for example:
li:hover {declaration}
This is commonly used when you use unordered list for navigation. Rather than declare the hover state for <a> you can define li. You will see examples later.
There are other pseudo elements and pseudo classes, below are just some examples.
CSS introduces both pseudo-elements and pseudo-classes. A pseudo-element acts like an extra element is in the code. For example:
p.intro:first-letter {font-size: 2em;} This line acts as if there is an extra element around the first letter. For links, when using psudo-calsses they should appear in this order: a:link {declaration} a:hover {declaration} a:active {declaration} a:visited {declaration} |
First letter or line
:first-letter :first-line Styling Links :link :hover :active :visited Responding to user :hover :active :focus :nth-child(n) More>> |
a:link a:hover a:active a:visited
Note:One thing to note, most modern web design does not employ underlined
links, at least not on every link. You will find most links have a value
of "text-decoration" set to "none." This removes the default underline
that all browsers place on links. More on this later when we employ CSS
resets.
More advance styling for a:hover to style navigation
nth-child ();
::selection
Note: this selector needs browser specific prefix to work for all browsers, also remember you need to "::" s.
You will write it like this:
p::selection {
background-color:#f00;
color:white;
}
p::-moz-selection {/*for firefox*/
background-color:#f00;
color:white;
}
p::-webkit-selection {/*for safari and chrome*/
background-color:#f00;
color:white;
}
p::-o-selection {/*for opera*/
background-color:#f00;
color:white;
}
p::-ms-selection {/*for ie*/
background-color:#f00;
color:white;
}
You will write it like this:
p::selection {
background-color:#f00;
color:white;
}
p::-moz-selection {/*for firefox*/
background-color:#f00;
color:white;
}
p::-webkit-selection {/*for safari and chrome*/
background-color:#f00;
color:white;
}
p::-o-selection {/*for opera*/
background-color:#f00;
color:white;
}
p::-ms-selection {/*for ie*/
background-color:#f00;
color:white;
}