In addition to the selectors already discussed the following can also be used:
Grouped Selectors
You can group multiple selectors to apply the same styles to different elements.
Combinators
Combinators are selectors that define the relationship between elements.
Descendant Selector (space)
Targets elements that are descendants of another element.
Child Selector (>)
Targets direct children of an element.
Adjacent Sibling Selector (+)
Targets the next sibling that immediately follows an element.
General Sibling Selector (~)
Targets all siblings that follow an element.
Universal Selector (*)
The universal selector targets all elements. It’s useful for applying global styles.
Attribute Selectors
Attribute selectors allow you to target elements based on their attributes and attribute values.
[attribute]
Selects elements with a specific attribute.
[attribute="value"]
Selects elements with a specific attribute value.
[attribute^="value"]
Selects elements whose attribute value starts with the specified value.
[attribute$="value"]
Selects elements whose attribute value ends with the specified value
[attribute="value"]*
Selects elements whose attribute value contains the specified value.
More Pseudo-Classes
We saw Pseudo-classes in relation to links and the anchor <a> tag. They can be used to target elements based on their state or position in the DOM in other ways.
:nth-child(n)
Selects the nth child of its parent (1-based index).
:nth-of-type(n)
Selects the nth element of its type among its siblings.
:first-child and :last-child
Select the first or last child of a parent.
:not(selector)
Excludes elements that match the specified selector.
:focus, :active
Select elements based on user interaction states.
Pseudo-Elements
Pseudo-elements in CSS are special keywords added to selectors that allow you to style specific parts of an element. They act as if they are creating a new element, but without actually adding it to the HTML. They are prefixed with two colons :: to differentiate them from pseudo-classes. Keywords include:
::before and ::after
Insert generated content before or after an element.
See the Pen Pseudo Elements ::before ::after by Martin Cooper (@mustbebuilt) on CodePen.
In the CodePen above, content is set to a Unicode charcacter to create dramatic quotation marks. The example also uses <blockquote> a HTML element that indicates that the enclosed text is an extended quotation
Tip: Unicode is a universal character encoding standard that assigns a unique number (code point) to every character, symbol or glyph used in writing systems and digital text. This includes characters from almost all languages, as well as symbols, punctuation marks, and even emojis.
::first-letter and ::first-line
Style the first letter or first line of text.
See the Pen Pseudo Element ::first-letter by Martin Cooper (@mustbebuilt) on CodePen.
::selection
Style the text selected by the user.
The :is() and :where() Pseudo-Classes
The :is() and :where() selectors allow you to group complex selectors.
:is()
Applies styles if any of the selectors match. It also reduces specificity issues.
:where()
Works similarly to :is() but always has zero specificity, making it useful for fallback styles.
Advanced :nth-child() Patterns
The :nth-child() pseudo-class can be customized with formulas like 2n, 2n+1, etc., for complex targeting.