YouTip

## CSS Pseudo-classes * * * CSS pseudo-classes are used to add special effects to some selectors. * * * ## Syntax Syntax of pseudo-classes: selector:pseudo-class {property:value;} CSS classes can also be used with pseudo-classes: selector.class:pseudo-class {property:value;} * * * ## Anchor Pseudo-classes In browsers supporting CSS, the different states of links can be displayed in different ways. ## Example a:link{color:#FF0000;}a:visited{color:#00FF00;}a:hover{color:#FF00FF;}a:active{color:#0000FF;} [Try it yourself »]( **Note:** In CSS definitions, a:hover must be placed after a:link and a:visited to be effective. **Note:** In CSS definitions, a:active must be placed after a:hover to be effective. **Note:** Pseudo-class names are case-insensitive. * * * Pseudo-classes can be used together with CSS classes: a.red:visited{color:#FF0000;}CSS Syntax If the link in the example above has already been visited, it will be displayed in red. * * * ## CSS :first-child Pseudo-class You can use the :first-child pseudo-class to select the first child element of a parent element. **Note:** In Internet Explorer 8 and earlier versions, a []( declaration is required for :first-child to work. ## Matching the First

Element In the following example, the selector matches any

element that is the first child of any element: ## Example p:first-child{color:blue; } [Try it yourself »]( * * * ## Matching the First Element Within All

Elements In the following example, the selector matches the first element within all

elements: ## Example p>i:first-child{color:blue; } [Try it yourself »]( * * * ## Matching All Elements Within

Elements That Are the First Child of Their Parent In the following example, the selector matches all elements inside

elements that are the first child of their parent element: ## Example p:first-child i{color:blue; } [Try it yourself »]( * * * ## CSS - :lang Pseudo-class The :lang pseudo-class allows you to define special rules for different languages. **Note:** Internet Explorer 8 requires a []( declaration to support the :lang pseudo-class. In the following example, the :lang class defines the type of quotation marks for elements whose lang attribute value is "no": ## Example q:lang(no) {quotes: "~" "~";} [Try it yourself »]( * * * ]( | :not(p) | Selects all elements except p elements | | [:nth-child(n)]( | p:nth-child(2) | Selects the second child element of the parent of all p elements | | [:nth-last-child(n)]( | p:nth-last-child(2) | Selects the second-to-last child element among all p elements | | [:nth-last-of-type(n)]( | p:nth-last-of-type(2) | Selects the second-to-last p element among all p elements | | [:nth-of-type(n)]( | p:nth-of-type(2) | Selects the second p element among all p elements | | [:only-of-type]( | p:only-of-type | Selects elements that have only one child which is a p element | | [:only-child]( | p:only-child | Selects p elements that are the only child of their parent | | [:optional]( | input:optional | Selects elements without the "required" attribute | | [:out-of-range]( | input:out-of-range | Selects elements with values outside a specified range | | [:read-only]( | input:read-only | Selects elements with the "readonly" attribute | | [:read-write]( | input:read-write | Selects elements without the "readonly" attribute | | [:required]( | input:required | Selects elements with the "required" attribute | | [:root]( | root | Selects the root element of the document | | [:target]( | #news:target | Selects the currently active #news element (e.g., when clicking a URL containing an anchor name) | | [:valid]( | input:valid | Selects all elements with valid values | | [:link]( | a:link | Selects all unvisited links | | [:visited]( | a:visited | Selects all visited links | | [:active]( | a:active | Selects the active link | | [:hover]( | a:hover | Selects the state when the mouse hovers over a link | | [:focus]( | input:focus | Selects the element that has focus after user input | | [:first-letter]( | p:first-letter | Selects the first letter of each

element | | [:first-line]( | p:first-line | Selects the first line of each

element | | [:first-child]( | p:first-child | Selects

elements that are the first child of any element | | [:before]( | p:before | Inserts content before each

element | | [:after]( | p:after | Inserts content after each

element | | [:lang(_language_)]( | p:lang(it) | Selects

elements whose lang attribute starts with "it" |