CSS Selectors
CSS (Cascading Style Sheets) provides a variety of selectors for selecting HTML elements to apply styles to.
CSS selectors are patterns used to select the elements you want to style.
The "CSS" column in the table below indicates the CSS version in which the property is defined. CSS1, CSS2, and CSS3 are different versions of Cascading Style Sheets, each introducing new features and capabilities to improve the control and design of web page styles.
Common CSS selectors
The following are some common CSS selectors:
Element Selector:Selects HTML elements by element name.
The following code,pThe selector will select all<p>Element:
p {
color: blue;
}
Class Selector:Selects HTML elements with a specific class by class name.
Class selectors start with.starting with, followed by the class name.
The following code,.highlightThe selector will select all elements with the class"highlight"elements.
.highlight {
background-color: yellow;
}
ID Selector:Selects HTML elements by the element's unique identifier (ID).
ID selectors start with#starting with, followed by the ID name.
The following code,#exampleThe selector will select elements with the ID"example"elements.
#example {
width: 200px;
}
Attribute selector:Selects HTML elements by the element's attributes. Attribute selectors can select based on attribute names and attribute values.
The following code,input[type="text"]The selector will select alltypeThe property is"text"the <input> element.
input[type="text"] {
border: 1px solid gray;
}Descendant Selector:Selects HTML elements by specifying the descendant relationship of elements.
The descendant selector uses spaces to separate element names.
In the following code, the div p selector will select all <p> elements within <div> elements.
div p {
font-weight: bold;
}For more selectors, refer to the following table:
| Selectors | Example | Example Explanation | CSS |
|---|---|---|---|
| .class | .intro | Selects all elements with class="intro" | 1 |
| #id | #firstname | Selects all elements with id="firstname" | 1 |
| * | * | Select all elements | 2 |
| element | p | Selects all <p> elements | 1 |
| element,element | div,p | Selects all <div> elements and <p> elements | 1 |
| element.class | p.hometown | Selects all <p> elements with class="hometown" | 1 |
| element element | div p | Selects all <p> elements within <div> elements | 1 |
| element>element | div>p | Selects all <p> elements whose parent is a <div> element | 2 |
| element+element | div+p | Selects the first <p> element immediately following a <div> element | 2 |
| [attribute] | [target] | Selects all elements with a target attribute | 2 |
| [attribute=value] | [target=-blank] | Selects all elements using target="-blank" | 2 |
| [attribute~=value] | [title~=flower] | Selects all elements whose title attribute contains the word "flower" | 2 |
| [attribute|=language] | [lang|=en] | Selects elements whose lang attribute is equal toen, or withen-all elements starting with | 2 |
| :link | a:link | Selects all unvisited links | 1 |
| :visited | a:visited | Selects all visited links | 1 |
| :active | a:active | Select active links | 1 |
| :hover | a:hover | Selects when the mouse is over a link | 1 |
| :focus | input:focus | Selects input elements that have focus | 2 |
| :first-letter | p:first-letter | Selects the first letter of each <p> element | 1 |
| :first-line | p:first-line | Selects the first line of every <p> element | 1 |
| :first-child | p:first-child | Specifies the style only when a <p> element is the first child of its parent. | 2 |
| :before | p:before | Inserts content before every <p> element | 2 |
| :after | p:after | Inserts content after every <p> element | 2 |
| :lang(language) | p:lang(it) | Selects all <p> elements whose lang attribute has a starting value of "it" | 2 |
| element1~element2 | p~ul | Selects every <ul> element that follows a <p> element | 3 |
| [attribute^=value] | a[src^="https"] | Selects every element whose src attribute value starts with "https" | 3 |
| [attribute$=value] | a[src$=".pdf"] | Selects every element whose src attribute value ends with ".pdf" | 3 |
| [attribute*=value] | a[src*="example"] | Selects every element whose src attribute value contains the substring "example" | 3 |
| :first-of-type | p:first-of-type | Selects each <p> element that is the first <p> element of its parent | 3 |
| :last-of-type | p:last-of-type | Selects each <p> element that is the last <p> element of its parent | 3 |
| :only-of-type | p:only-of-type | Selects each <p> element that is the only <p> element of its parent | 3 |
| :only-child | p:only-child | Selects each <p> element that is the only child of its parent | 3 |
| :nth-child(n) | p:nth-child(2) | Selects each <p> element that is the second child of its parent | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Selects each <p> element that is the second child of its parent, counting from the last child | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Selects each <p> element that is the second <p> element of its parent | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects each <p> element that is the second <p> element of its parent, counting from the last child | 3 |
| :last-child | p:last-child | Selects each <p> element that is the last child of its parent. | 3 |
| :root | :root | Selects the root element of the document | 3 |
| :empty | p:empty | Selects each <p> element that has no children (including text nodes) | 3 |
| :target | #news:target | Selects the currently active #news element (the clicked URL containing that anchor name) | 3 |
| :enabled | input:enabled | Selects every enabled input element | 3 |
| :disabled | input:disabled | Selects every disabled input element | 3 |
| :checked | input:checked | Selects every checked input element | 3 |
| :not(selector) | :not(p) | Selects every element that is not a <p> element | 3 |
| ::selection | ::selection | Matches the portion of an element that is selected or highlighted by the user | 3 |
| :out-of-range | :out-of-range | Matches input elements whose value is outside the specified range | 3 |
| :in-range | :in-range | Matches input elements whose value is within the specified range | 3 |
| :read-write | :read-write | Used to match readable and writable elements | 3 |
| :read-only | :read-only | Used to match elements with the "readonly" attribute set | 3 |
| :optional | :optional | Used to match optional input elements | 3 |
| :required | :required | Used to match elements with the "required" attribute set | 3 |
| :valid | :valid | Used to match elements with valid input values | 3 |
| :invalid | :invalid | Used to match elements with invalid input values | 3 |
| :has | :has | Allows selecting an element based on its descendant elements. | 3 |
| :is | :is | Accepts any number of selectors as parameters and returns the union of elements matched by these selectors. | 3 |