Open In App
Related Articles

CSS Selectors Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.
Try
[attribute=value]Select those elements whose attribute value is equal to “value”.
Try
[attribute$=value]Select those elements whose attribute value ends with a specified value “value”. 
Try
[attribute|=value]Select those elements whose attribute value is equal to “value”. 
Whose attribute value started with “value” immediately followed by hyphen (-).
Try
[attribute~=value]Select those elements whose attribute value contains a specified word. 
Try
[attribute^=value]Select those elements whose attribute value begins with the given attribute.
Try
#idSet the style of the given id. The id attribute is the unique identifier in an HTML document.
Try
*Select all the elements in an HTML document.  
Try
activeIt is used in styling an active link on the web page. Style display when the user clicks on the link.
Try
afterIt is used to add the same content multiple times after the content of other elements. 
Try
beforeIt is used to add the same content multiple times before the content of other elements
Try
checkedSelect all checked elements in the input tag and radio buttons.
Try
ClassSelect all elements which belong to a particular class attribute
Try
defaultSet a default element in a group of the same type of element in a form. 
Try
disabledThis property is mostly used on the form elements. 
Try
elementSelect HTML elements that are required to be style
Try
element elementSelect elements inside the elements
Try
element, elementIt is used to style all comma-separated elements with the same style.
Try
element1~element2It is used to match the occurrences of element2 followed by element1
Try
emptySelect that element that does not contain any children (including the text node). 
Try
enabledSet the background color in the enabled element in a form
Try
first-childSelect those elements which are the first-child elements.
Try
first-of-typeIt is used to target the first child of every element of its parent.
Try
first-letterApply the style to the first letter of the first line of a block-level element.
Try
first-lineApply style to the first line of a block-level element.
Try
focusIt is used to target the focused element.
Try
hover Style elements when the mouse hovers over them
Try
indeterminateSelect any form elements that are in an indeterminate state
Try
in-range Select all elements that are given within a particular range value.
Try
invalid Select every form element that does not validate according to the elements
Try
lang Target the element which is based on language attributes for a specific value.
Try
last-childTarget the last child element of its parent for styling.
Try
last-of-typeTarget the last child element of the same type as it’s the parent for styling.
Try
linkTarget the unvisited link for styling, not the links which are already visited.
Try
not Style every element that is not specified by the selector
Try
nth-child()Match the elements based on their position in a group of siblings.
Try
nth-last-child()Match elements based on their position among the group of siblings, counting from the end. 
Try
nth-last-of-type()Style only those elements which are the nth number of child of the parent element.
Try
nth-of-type()Style only those elements which are the nth number of child of its parent element.
Try
optionalStyle the form input elements which are optional. 
Try
only-childMatch every element that is the only child of its parent
Try
only-of-typeSelect only those elements have no siblings of the given type.
Try
out-of-rangeSelect the elements that are lying outside the given range
Try
placeholderDesign the placeholder text by changing the text color and it allows modification of the style of the text.
Try
read-onlySelect an element that is readable only
Try
read-writeSelect an element (such as an input text) that is editable by the user. 
Try
requiredSelect the required element with the required attribute and set the CSS property.
Try
rootSelect all the elements of an HTML Documents
Try
selectionSet the CSS property to the part of the document that is selected by the user.
Try
targetThe target selector is used to represent a unique element.
Try
validSelect the form elements with a given value that validates according to the elements.
Try
visitedselect the visited links.
Try


Last Updated : 07 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads