Target HTML Elements like you know what you're doing!
The basic selectors to reach classes, identifiers, and elements. All of the other selectors chain off of these.
Target an element type, based on the HTML tag name, such as "a" for all links or "p" for all paragraphs.
Prefixing the hash symbol to a selector allows us to target by id. An ID may appear only once in the document. Must be unique.
Prefixing a period to a selector allows us to target by class name. A class may be used on many elements. Not unique.
The asterisk symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding for quick tests. Don't use in production code though.
Defines a parent element before selecting, instead of applying to the entire document, such as only selecting the links within the menu div, or only the paragraph tags that appear within the div that has an id of #content.
Selects all matches, but only one level deep in the hierarchy. It won't match nested items.
Similar to the child selector, except it matches deep into the hierarchy. Example would be styling every link that occurs in a list item, even if the list items are nested.
Will select the first element specified that is on the same hierarchy level, but occurring after. Such as the first paragraph after an unordered list. Ex: ul + p
Similar to X+Y, but less strict. Will select all siblings that match instead of just the first one.
Attribute selectors allow you to select elements based on the attributes they contain.
Selects an element that has that attribute. Ex: img[alt]
Finds element with specified attribute with exact value.
Same, but value doesn't have to be exact to match.
Targets attribute from the beginning. Useful for selecting links to an external site to place an icon like Wikipedia does.
Targets attribute from the end. Useful for selecting links to a certain file type, so that you can place an icon after the link.
Allows attributes to be targeted that have multiple space delimited values. Ex: a[data-info~="external"] from <a href="http://example.com/flowers.jpg" data-info="external image">Flowers</a>
Select all elements except for the one specified. To select all divs except for the one with a #footer id, Ex: div:not(#footer)
Matches an id when the hash in the URL is the same. Useful for changing the color of a menu item if it's the current page, or highlighting the relevant section after clicking an anchor tag that jumps to an internal id.
Selects elements whose languages have been set to the specified language using the lang attribute.
The most common of pseudo-classes, which are used to style links.
The normal, default state of links, just as you first found them. Unclicked links are usually underlined and blue by default. This will let you change that.
Selects links that you have already visited in the browser you are currently using. Clicked links are usually underlined and purple by default. This will let you change that.
Also commonly used to style links, but may also be used on other elements.
Selects links that currently have the keyboard caret within them. Can also select other elements, such as a form input field that you tabbed into.
Selects links that are currently being hovered over by the mouse pointer. Can also select other elements, such as the div that the mouse is currently over.
Selects links that are currently being clicked on. This is especially important for mobile websites, to let the user know they finger tapped the link successfully. Touch screens can be tricky and mobile devices tend to have lag.
Most commonly used to style form elements in conjunction with HTML5 validation features.
Selects a form or input element whose content validates according to the "type" attribute or a regex in the "pattern" attribute.
Selects a form or input element whose content is invalid according to the "type" attribute or a regex in the "pattern" attribute. If an input field has the "required" attribute, the style will be applied to the field until it has content in it.
Selects elements that are enabled, which is the default.
Selects elements that are disabled, meaning the "disabled" attribute exists.
Selects elements that are checked, meaning the "checked" attribute exists. Things like radio boxes and checkboxes.
Advanced selectors that allow you to target specific elements based on their position in the document hierarchy.
Selects the root element of the document, which is usually the html element.
Selects by child element. Add "n" to select every 2nd list item. Can also use "odd" and "even". Can also do math, like 3n-2, which selects every 3rd item and subtracts 2, so 3, 6, 9 becomes 1, 4, 7.
Ex: li:nth-child(10) Ex: li:nth-child(2n) Ex: li:nth-child(even) Ex: li:nth-child(3n-2)
Does the same as X:nth-child(n), but starts at the last element and counts from there.
Similar to X:nth-child(n), except it counts by element type rather than child number. It will ignore any rogue elements interspersed within the repeated sequence of like elements. If there are 2 p tags, 1 h3 tag, and 3 more p tags, and you select for p, it'll ignore the h3 even though it's a child.
Does the same as X:nth-of-type(n), but starts at the last element and counts from there.
Would select the first instance of an element that is a child element of its parent. Because it's based on children, it would not select the specified element if it's not the first child.
Same as first-child, except it tries to select the last element.
Select based on type rather than child. So if you specify a particular element, it'll select the first instance of it even there are other types of elements before it.
Same as first-of-type, except it starts searching from the last element.
Selects an element only if it's the only child of its parent.
Selects an element only if it's the only sibling of its type inside the parent.
Selects an element only if it has no child elements at all, including text nodes.
Pseudo-elements differ from pseudo-classes in that they don't select states of elements; they select parts of an element. Note that pseudo elements use double colons, although they are backwards compatible with single colons too.
Select the first letter inside a given element. Often used to select the first letter of a paragraph and make it big and fancy, like in books.
Would be used to select the first line of every paragraph, for example.
Specify that content should be inserted before the element you are selecting. Use the content rule to specify what the content is.
Specify that content should be inserted before the element you are selecting. Use the content rule to specify what the content is. Combine with an attribute selector, such as to select all links to a PDF file, and insert an Adobe Reader icon.
Used with a X::before or X::after, the attr(foo) function will grab the value of the specified attribute, which can then be inserted as content. For example, attr(href) would grab the link URL, which can then be inserted after the link. You might want to do this on a print style sheet, since on paper, there would be no other way to know what the links are for.
This lets you specify the URL of an item, such as an image, to be inserted when using X::before or X::after.
Used along with the counter-reset and counter-increment rules, a counter can be inserted via X::before and X::after. Useful to number things that aren't ordered lists. The counter() function inserts either via its own rule, or as part of the content rule on the pseudo-elements before or after.