Open In App

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.






<!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

Article Tags :