CSS Selectors
CSS also has a variety of selectors that can be used to target specific HTML elements based on their attributes, location in the document, or relationship to other elements. The four most commonly used CSS selectors are as follows:
Element Selector:
Selects an HTML element based on its tag name. For example, h1 selects all h1 elements on the page.
Class Selector:
Selects an HTML element based on its class attribute. For example, .header selects all elements with the class name “header”.
ID Selector:
Selects an HTML element based on its ID attribute. For example, #logo selects the element with the ID “logo”.
Descendant Selector:
Selects an HTML element that is a descendant of another element. For example, ul li selects all li elements that are descendants of ul elements.
There are many other types of selectors, and they can be combined to create complex selectors that target specific elements on the page. Among these are as follows:
| Selector | Description | Example Usage |
|---|---|---|
| * | Selects all elements in the document. | * |
| element | Selects all elements of the specified HTML tag. | p { color: blue; } |
| #id | Selects an element with the specified ID. | #myElement { font-size: 20px; } |
| .class | Selects all elements with the specified class. | .myClass { background-color: yellow; } |
| selector1, selector2 | Selects all elements that match either selector1 or selector2. | p, h1 { font-weight: bold; } |
| selector1 selector2 | Selects all elements that are descendants of selector1 and match selector2. | .parentElement .childElement { color: red; } |
| selector1 > selector2 | Selects all elements that are direct children of selector1 and match selector2. | ul > li { list-style: none; } |
| selector1 + selector2 | Selects the element that is immediately preceded by selector1 and matches selector2. | p + span { font-style: italic; } |
| selector1 ~ selector2 | Selects all elements that are siblings of selector1 and match selector2. | h2 ~ p { margin-top: 10px; } |
| [attribute] | Selects all elements that have the specified attribute. | [href] { text-decoration: underline; } |
| [attribute=value] | Selects all elements that have the specified attribute with a specific value. | [type="submit"] { background-color: green; } |
| :hover | Selects an element when it is being hovered over by the mouse pointer. | a:hover { color: purple; } |
| :nth-child(n) | Selects the nth child element of its parent. | ul li:nth-child(2) { font-weight: bold; } |
| :first-child | Selects the first child element of its parent. | li:first-child { color: red; } |
| :last-child | Selects the last child element of its parent. | li:last-child { color: blue; } |
| :not(selector) | Selects all elements that do not match the specified selector. | :not(.special) { opacity: 0.5; } |
| [attribute^=value] | Selects all elements that have the specified attribute and its value starts with a certain value. | [class^="btn-"] { background-color: yellow; } |
| [attribute$=value] | Selects all elements that have the specified attribute and its value ends with a certain value. | a[href$=".pdf"] { color: red; } |
| [attribute*=value] | Selects all elements that have the specified attribute and its value contains a certain value. | input[type*="email"] { border: 1px solid blue; } |