Open In App

CSS Selectors Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
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

#id Set 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

active It is used in styling an active link on the web page. Style display when the user clicks on the link.
Try

after It is used to add the same content multiple times after the content of other elements. 
Try

before It is used to add the same content multiple times before the content of other elements
Try

checked Select all checked elements in the input tag and radio buttons.
Try

Class Select all elements which belong to a particular class attribute
Try

default Set a default element in a group of the same type of element in a form. 
Try

disabled This property is mostly used on the form elements. 
Try

element Select HTML elements that are required to be style
Try

element element Select elements inside the elements
Try

element, element It is used to style all comma-separated elements with the same style.
Try

element1~element2 It is used to match the occurrences of element2 followed by element1
Try

empty Select that element that does not contain any children (including the text node). 
Try

enabled Set the background color in the enabled element in a form
Try

first-child Select those elements which are the first-child elements.
Try

first-of-type It is used to target the first child of every element of its parent.
Try

first-letter Apply the style to the first letter of the first line of a block-level element.
Try

first-line Apply style to the first line of a block-level element.
Try

focus It is used to target the focused element.
Try

hover  Style elements when the mouse hovers over them
Try

indeterminate Select 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-child Target the last child element of its parent for styling.
Try

last-of-type Target the last child element of the same type as it’s the parent for styling.
Try

link Target 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

optional Style the form input elements which are optional. 
Try

only-child Match every element that is the only child of its parent
Try

only-of-type Select only those elements have no siblings of the given type.
Try

out-of-range Select the elements that are lying outside the given range
Try

placeholder Design the placeholder text by changing the text color and it allows modification of the style of the text.
Try

read-only Select an element that is readable only
Try

read-write Select an element (such as an input text) that is editable by the user. 
Try

required Select the required element with the required attribute and set the CSS property.
Try

root Select all the elements of an HTML Documents
Try

selection Set the CSS property to the part of the document that is selected by the user.
Try

target The target selector is used to represent a unique element.
Try

valid Select the form elements with a given value that validates according to the elements.
Try

visited select the visited links.
Try



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