Attribute selectors – They may match in four ways:
[att] – Match when the element sets the “att” attribute, whatever the value of the attribute. [att=val] – Match when the element’s “att” attribute value is exactly “val”. [att~=val] – Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly “val”. [att|=val] – Represents an element with the att attribute, its value either being exactly “val” or beginning with “val” immediately followed by “-” .:first-child pseudo-class – It matches an element that is the first child element of some other element. In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV:
div > p:first-child { text-indent: 0 }
This selector would match the P inside the DIV of the following fragment:
<P> The last P before the note.
<DIV class=”note”>
<P> The first P inside the note.
</DIV>
:link and :visited pseudo-class – The :link pseudo-class applies for links that have not yet been visited. The :visited pseudo-class applies once the link has been visited by the user. The two states are mutually exclusive. They are used as
a:link { color: red }
:link { color: red }
:hover, :active, and :focus pseudo-classes – The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it like when mouse pointer hovers over a box generated by the element. The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).
The :first-line pseudo-element – It applies special styles to the contents of the first formatted line of a paragraph. For instance:
p:first-line { text-transform: uppercase }
The above rule means “change the letters of the first line of every paragraph to uppercase”. However, the selector “P:first-line” does not match any real HTML element. It does match a pseudo-element that conforming user agents will insert at the beginning of every paragraph.
The :first-letter pseudo-element – It must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The :before and :after pseudo-elements – The ‘:before’ and ‘:after’ pseudo-elements can be used to insert generated content before or after an element’s content as
h1:before {content: counter(chapno, upper-roman) “. “}
When the :first-letter and :first-line pseudo-elements are applied to an element having content generated using :before and :after, they apply to the first letter or line of the element including the generated content.
p.special:before {content: “Special! “}
p.special:first-letter {color: #ffd800}
