a:hover {\n \/* Yep, hover is a pseudo class *\/\n}<\/code><\/pre>\n\n\n\nThey are immensely useful in a variety of situations. Some of them are CSS3, some CSS2… it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support for them. The link-related ones work but not much else. Let’s take a brief look at each one of them. Don’t worry, there aren’t that many.<\/p>\n\n\n\n\n\n\n
Link-related pseudo class selectors<\/h3>\n\n\n
:link<\/code><\/a>\u00a0\u2013 Perhaps the most confusion-causing link-related pseudo-selector. Aren\u2019t all\u00a0<a><\/code>\u00a0links? Well not if they don\u2019t have an href attribute. This selects only those that do, thus is essentially the same as a[href]<\/code>. This selector will become a lot more useful should\u00a0any-element linking<\/a>\u00a0become reality.<\/p>\n\n\n\n:visited<\/code><\/a> – Selects links that have already been visited by the current browser.<\/p>\n\n\n\n:hover<\/code><\/a> – When the mouse cursor rolls over a link, that link is in its hover state and this will select it.<\/p>\n\n\n\n:active<\/code><\/a> – Selects the link while it is being activated (being clicked on or otherwise activated). For example, for the “pressed” state of a button-style link or to make all links feel more button-like<\/a>.<\/p>\n\n\n\nThere is a fun technique to remember all the link pseudo-class selectors. Look at the first letter of each: LVHA … L<\/strong>OV<\/strong>E HA<\/strong>TE<\/a>.<\/p>\n\n\nInput & link related pseudo class selectors<\/h3>\n\n\n
:focus<\/code><\/a> – Defining hover styles for links is great, but it doesn’t help out those who used keyboard navigation to get to the link. :focus will select links that are the current focus of the keyboard. This is not limited to links, but can be used (and really should be used) on inputs and textareas as well. Some would tell you<\/a> to define a :focus style for anything that has a :hover style.<\/p>\n\n\n\n![\"Form](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/formwithfocus.png\")
Form with a text input in focus. Yellow background is a focus style.<\/figcaption><\/figure>\n\n\n\n:target<\/code><\/a> – The target pseudo class is used in conjunction with IDs, and match when the hash tag in the current URL matches that ID. So if you are at URL www.yoursite.com\/#home then the selector #home:target<\/tt> will match. That can be extremely powerful. For example, you can create a tabbed area<\/a> where the tabs link to hash tags and then the panels “activate” by matching :target<\/code> selectors and (for example) using z-index to move to the top.<\/p>\n\n\n\n:enabled<\/code><\/a> – Selects inputs that are in the default state of enabled and ready to be used.<\/p>\n\n\n\n:disabled<\/code><\/a> – Selects inputs that have the disabled<\/tt> attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/disabledelements.png\" "\\"\\"")
Form using the :disabled attribute.<\/figcaption><\/figure>\n\n\n\n:checked<\/code><\/a> – Selects checkboxes that are, wait for it, checked.<\/p>\n\n\n\n:indeterminate<\/code><\/a> – Selects radio buttons that are in the purgatory state of neither chosen or unchosen (like when a page loads with radio button choices but no default is set).<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/radiopurgatory.png\" "\\"\\"")
Set of radio buttons in purgatory. Or more accurately, in their :indeterminate status.<\/figcaption><\/figure>\n\n\n\n:required<\/code><\/a> – Selects inputs with the required<\/code> attribute.
:optional<\/code><\/a> – Selects inputs that do not have the required<\/code> attribute.<\/p>\n\n\n\n:read-only<\/code> \/ :read-write<\/code><\/a> – Selects elements based on a combination of readonly<\/code> and disabled<\/code> attriutes.<\/p>\n\n\nPosition\/Number-based pseudo class selectors<\/h3>\n\n\n
:root<\/code><\/a> – Selects the element that is at the root of the document. Almost certainly will select the <\/code> element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML.<\/p>\n\n\n\n:first-child<\/code><\/a> – Selects the first element within a parent.<\/p>\n\n\n\n:last-child<\/code><\/a> – Selects the last element within a parent.<\/p>\n\n\n\n:nth-child()<\/code><\/a> – Selects elements based on a simple provided algebraic expression (e.g. “2n” or “4n-1”). Has the ability to do things like select even\/odd elements, “every third”, “the first five”, and things like that. Covered in more detail here<\/a> with a tester tool<\/a>.<\/p>\n\n\n\n:nth-of-type()<\/code><\/a> \u2013 Works like :nth-child, but used in places where the elements at the same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images. :nth-child won\u2019t work there, you\u2019d use\u00a0div img:nth-of-type(odd)<\/code>. Particularly useful when working with definition lists and their alternating\u00a0<dt><\/code>\u00a0and\u00a0<dd><\/code>\u00a0elements.<\/p>\n\n\n\n:first-of-type<\/code><\/a> – Selects the first element of this type within any parent. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type<\/tt> would select the first image inside the first div and the first image inside the second div.<\/p>\n\n\n\n:last-of-type<\/code><\/a> – Same as above, only would select the last image inside the first div and the last image inside the second div.<\/p>\n\n\n\n:nth-last-of-type()<\/code><\/a> – Works like :nth-of-type, but it counts up from the bottom instead of the top.<\/p>\n\n\n\n:nth-last-child()<\/code><\/a> – Works like :nth-child, but it counts up from the bottom instead of the top.<\/p>\n\n\n\n:only-of-type<\/code><\/a> – Selects only if the element is the only one of its kind within the current parent.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/relationalpseudos2.png\" "\\"\\"")
Position\/Number-based pseudo class selectors<\/figcaption><\/figure>\n\n\nRelational pseudo class selectors<\/h3>\n\n\n
:not()<\/code><\/a> – Removes elements from an existing matched set that match the selector inside the parameter of :not(). So for example, all divs except<\/em> those with a class of “music” = div:not(.music)<\/tt>. The spec says that :not selectors cannot be nested, but they can be chained. Some browsers (Firefox) also support comma-separated selectors as the selector parameter, although chaining them would be a far safter bet. Also useful in conjunction with attribute selectors, e.g. input:not([disabled])<\/tt>.<\/p>\n\n\n\n:empty<\/code><\/a> – Selects elements which contain no text and no child elements. Like: <\/code><\/p>\n\n\nText-related pseudo class selectors \/ elements<\/h3>\n\n\n
::first-letter<\/code><\/a> – Selects the first letter of the text in the element. Typical use: drop caps.<\/p>\n\n\n\n::first-line<\/code><\/a> – Selects the first line of text in the element. Typical use: setting the first sentence in small caps as a typographical eye-catcher\/lead-in.<\/p>\n\n\n\n:lang<\/code><\/a> – This pseudo selector is in the CSS3 spec but is only implemented in IE 8+. Will match anything that either has or is a descendant of an element with a matching lang attribute. For example, :lang(fr)<\/code> will match any paragraph, even without a lang attribute, if the parent body had lang=\"fr\"<\/code> as an attribute.<\/p>\n\n\nQuick note<\/h4>\n\n\n
You can chain pseudo selectors just like you can chain class and ID selectors<\/a>. This is particularly useful here while we are looking at :first-letter<\/code> and :first-line<\/code>. You probably wouldn’t want to drop cap every single paragraph on the page, but just the first one, so, p:first-child:first-letter { }<\/code><\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/dropcap.png\" "\\"\\"")
Dropcap using :first-letter, which enlarges the font size and floats to the left.<\/figcaption><\/figure>\n\n\nContent-related pseudo “elements”<\/h3>\n\n\n
::before<\/code><\/a> – Is able to add content before a certain element. For example, adding an opening quote before a blockquote or perhaps an preceding image to set apart a particular paragraph.<\/p>\n\n\n\n::after<\/code><\/a> – Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the clearfix<\/a>, where an empty space is added after the element which clears the float without any need for extra HTML markup.<\/p>\n\n\nPseudo Elements vs Pseudo Classes<\/h4>\n\n\n
The above two selectors are appropriately called pseudo “elements” (not selectors) because they don’t select any “real” element that exists on the page. This goes for these two, as well as the previous sections ::first-letter<\/code> and ::first-line<\/code>. Make sense? Like the first letter that ::first-letter<\/code> selects isn’t an element all to itself, it’s just a part of an existing element, hence, pseudo element.<\/p>\n\n\n\n