CSS Selectors Complete Reference
CSS selectors are used to select HTML elements based on their element name, id, class, attribute, and many more.
Example: Below the HTML/CSS code shows the functionality of ::after selector.
HTML
<!DOCTYPE html> < html > < head > < style > p::after { content: " - Remember this"; background-color: blue; } </ style > </ head > < body > < h3 >After Selector</ h3 > < p >User ID: @dmor1</ p > < p >Name: GFG</ p > </ body > </ html > |
Output:
The complete reference of CSS selectors is listed below:
CSS Selectors |
Description |
Example |
---|---|---|
[attribute*=value] | Select those elements whose attribute value contains the specified substring str. | |
[attribute=value] | Select those elements whose attribute value is equal to “value”. | |
[attribute$=value] | Select those elements whose attribute value ends with a specified value “value”. | |
[attribute|=value] | Select those elements whose attribute value is equal to “value”. Whose attribute value started with “value” immediately followed by hyphen (-). |
|
[attribute~=value] | Select those elements whose attribute value contains a specified word. | |
[attribute^=value] | Select those elements whose attribute value begins with the given attribute. | |
#id | Set the style of the given id. The id attribute is the unique identifier in an HTML document. | |
* | Select all the elements in an HTML document. | |
active | It is used in styling an active link on the web page. Style display when the user clicks on the link. | |
after | It is used to add the same content multiple times after the content of other elements. | |
before | It is used to add the same content multiple times before the content of other elements | |
checked | Select all checked elements in the input tag and radio buttons. | |
Class | Select all elements which belong to a particular class attribute | |
default | Set a default element in a group of the same type of element in a form. | |
disabled | This property is mostly used on the form elements. | |
element | Select HTML elements that are required to be style | |
element element | Select elements inside the elements | |
element, element | It is used to style all comma-separated elements with the same style. | |
element1~element2 | It is used to match the occurrences of element2 followed by element1 | |
empty | Select that element that does not contain any children (including the text node). | |
enabled | Set the background color in the enabled element in a form | |
first-child | Select those elements which are the first-child elements. | |
first-of-type | It is used to target the first child of every element of its parent. | |
first-letter | Apply the style to the first letter of the first line of a block-level element. | |
first-line | Apply style to the first line of a block-level element. | |
focus | It is used to target the focused element. | |
hover | Style elements when the mouse hovers over them | |
indeterminate | Select any form elements that are in an indeterminate state | |
in-range | Select all elements that are given within a particular range value. | |
invalid | Select every form element that does not validate according to the elements | |
lang | Target the element which is based on language attributes for a specific value. | |
last-child | Target the last child element of its parent for styling. | |
last-of-type | Target the last child element of the same type as it’s the parent for styling. | |
link | Target the unvisited link for styling, not the links which are already visited. | |
not | Style every element that is not specified by the selector | |
nth-child() | Match the elements based on their position in a group of siblings. | |
nth-last-child() | Match elements based on their position among the group of siblings, counting from the end. | |
nth-last-of-type() | Style only those elements which are the nth number of child of the parent element. | |
nth-of-type() | Style only those elements which are the nth number of child of its parent element. | |
optional | Style the form input elements which are optional. | |
only-child | Match every element that is the only child of its parent | |
only-of-type | Select only those elements have no siblings of the given type. | |
out-of-range | Select the elements that are lying outside the given range | |
placeholder | Design the placeholder text by changing the text color and it allows modification of the style of the text. | |
read-only | Select an element that is readable only | |
read-write | Select an element (such as an input text) that is editable by the user. | |
required | Select the required element with the required attribute and set the CSS property. | |
root | Select all the elements of an HTML Documents | |
selection | Set the CSS property to the part of the document that is selected by the user. | |
target | The target selector is used to represent a unique element. | |
valid | Select the form elements with a given value that validates according to the elements. | |
visited | select the visited links. |
Contact Us