CSS (Cascading Style Sheets) selectors are patterns used to select the elements you want to style. There are a variety of selectors available to target elements in different ways. Here’s a list of common CSS selectors:
- Universal Selector:
*: Matches any element.
- Type Selector (Element Selector):
p: Matches every<p>element.
- Class Selector:
.classname: Matches elements with a class of “classname”.
- ID Selector:
#idname: Matches the element with an ID of “idname”.
- Descendant Selector:
article p: Matches all<p>elements inside an<article>element.
- Child Selector:
article > p: Matches all<p>elements that are direct children of an<article>.
- Attribute Selector:
[attr]: Matches elements with the attribute “attr”.[attr=value]: Matches elements with the attribute “attr” and value “value”.[attr^=value]: Matches elements with the attribute “attr” starting with “value”.[attr$=value]: Matches elements with the attribute “attr” ending with “value”.[attr*=value]: Matches elements with the attribute “attr” containing the substring “value”.
- Pseudo-classes:
:hover: Matches an element when it is being hovered over.:active: Matches an element during the time it is activated (like a mouse press).:focus: Matches an element when it has focus.:nth-child(n): Matches the nth child of an element.:first-child: Matches the first child of an element.:last-child: Matches the last child of an element.:not(selector): Matches elements that do not match the specified selector.
- Pseudo-elements:
::before: Inserts content before the content of the selected element.::after: Inserts content after the content of the selected element.::first-line: Matches the first line of an element.::first-letter: Matches the first letter of an element.::selection: Matches the portion of an element that’s selected by the user.
- Grouping:
h1, h2, h3: Matches<h1>,<h2>, and<h3>elements.
- Adjacent Sibling Selector:
h2 + p: Matches a<p>element immediately following any<h2>element.
- General Sibling Selector:
h2 ~ p: Matches any<p>element following a<h2>element (not necessarily immediately after).
These are just some of the more common CSS selectors.