Pseudo Class Selectors Flashcards
Link-related pseudo class selectors (4)
:link - Perhaps the most confusion-causing link-related pseudo selector. Aren’t all <a>’s links? Well not if they don’t have an href attribute. This selects only those that do, thus is essentially the same as a[href]. This selector will become a lot more useful should any-element linking become reality.</a>
:visited - Selects links that have already been visited by the current browser.
:hover - When the mouse cursor rolls over a link, that link is in it’s hover state and this will select it.
:active - 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.
There is a fun technique to remember all the link pseduo class selectors. Look at the first letter of each: LVHA … LOVE HATE.
Input & link related pseudo class selectors (6)
:focus - 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 to define a :focus style for anything that has a :hover style.
:target - 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 will match. That can be extremely powerful. For example, you can create a tabbed area where the tabs link to hash tags and then the panels “activate” by matching :target selectors and (for example) using z-index to move to the top.
:enabled - Selects inputs that are in the default state of enabled and ready to be used.
:disabled - Selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.
:checked - Selects checkboxes that are, wait for it, checked.
:indeterminate - 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).
Position/Number-based pseudo class selectors
:root - Selects the element that is at the root of the document. Almost certainly will select the html element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML.
:first-child - Selects the first element of its type within a parent.
:last-child - Selects the last element of its type within a parent.
:nth-child(N) - 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 with a tester tool.
:nth-of-type(N) - 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’t work there, you’d use div img:nth-of-type(odd). Particularly useful when working with definition lists and their alternating <dt> and <dd> elements.
:first-of-type - 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 would select the first image inside the first div and the first image inside the second div.
:last-of-type - Same as above, only would select the last image inside the first div and the last image inside the second div.
:nth-last-of-type(N) - Works like :nth-of-type, but it counts up from the bottom instead of the top.
:nth-last-child(N) - Works like :nth-child, but it counts up from the bottom instead of the top.
:only-of-type - Selects only if the element is the only one of its kind within the current parent.
Relational pseudo class selectors
:not(S) - Removes elements from an existing matched set that match the selector inside the parameter of :not(). So for example, all divs except those with a class of “music” = div:not(.music). 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]).
:empty - Selects elements which contain no text and no child elements. e.g. ‹p›‹/p›
Text-related pseudo class selectors / elements
:first-letter - Selects the first letter of the text in the element. Typical use: dropcaps.
:first-line - 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.
:lang - This pseudo selector is in the CSS3 spec but 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) will match any paragraph, even without a lang attribute, if the parent body had lang=”fr” as an attribute.p
Content-related pseudo “elements”
:before - 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.
:after - Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the clearfix, where an empty space is added after the element which clears the float without any need for extra HTML markup.
