CSS Pseudo-classes explained
Pseudo-css classes are really useful , and fun to use,take a look at some.
What are pseudo-classes used for after all ?
A pseudo-class is used to define a special state of an element. we can used it to define a style for an element ,when it’s in a certain state like clicked , hovered ,focused and etc.
Pseudo-class syntax
selector:pseudo-class {
property: value;
}a:hover {
color:red;
}
A css pseudo-class Cheatsheet
Link pseudo class selectors
:link — This selects a <a> that has an href attribute defined .
: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.
Input & link pseudo class selectors
:focus — This pseudo class will select links that are the current focus of the keyboard. This is not limited to links, but can 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.
: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).
:required – Selects inputs with the required attribute.:optional – Selects inputs that do not have the required attribute.
:read-only / :read-write – Selects elements based on a combination of readonly and disabled attributes.
Text-related pseudo class selectors / elements
::first-letter – Selects the first letter of the text in the element.
::first-line – Selects the first line of text in the element.
Relational pseudo class selectors
:not() – 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 safer bet. Also useful in conjunction with attribute selectors, e.g. input:not([disabled]).
:empty – Selects elements which contain no text and no child elements. Like: <p></p>
Position/Number-based pseudo class selectors
:first-child – Selects the first element within a parent.
:last-child – Selects the last element within a parent.
:nth-child() – 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() – 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() – Works like :nth-of-type, but it counts up from the bottom instead of the top.
:nth-last-child() – 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.
: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.
