CSS Almanac → Selectors
Selectors are the elements that CSS “hooks” into to apply styles. Read our CSS Selectors Guide for a bunch more on that.
Adjacent sibling
The adjacent sibling combinator in CSS isn’t a selector on its own, but a way of combining two selectors. For […]Adjacent siblingp + p { }[attribute]
There are lots of ways you can select elements in CSS. The most basic selection is by tag name, like […][attribute][data-value] {}Chained
It’s possible to combine selectors to share the same set of styles. All we do is separate each selector with […]ChainedA, B { }Child
A child combinator in CSS is the “greater than” symbol, it looks like this: ol > li { color: red; […]Childol > li { }Class
A class selector in CSS starts with a dot (.), like this: A class selector selects all elements with a […]Class.class { }Descendant
A descendant selector in CSS is any selector with white space between two selectors without a combinator. Here’s some examples: […]DescendantA B { }General sibling
The general sibling combinator (~) in CSS looks like this in use: In that example, you would be selecting all […]General siblingA ~ BID
The #id selector allows you to target an element by referencing the id HTML attribute. Similar to how class attributes […]ID#A { }Type
A Type Selector (sometimes referred to as an Element Type Selector) matches elements with the corresponding element node name, such […]Typep, a, h1 { }Universal
The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches […]Universal* { box-sizing: border-box; }