Skip to content
Related Articles

Related Articles

CSS Selectors Complete Reference

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 23 Nov, 2022
Improve Article
Save Article

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

CSS [attribute*=value] Selector The [attribute*=”str”] selector is used to select those elements whose attribute value contains the specified substring str.
CSS [attribute=value] Selector The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to “value”.
CSS [attribute$=value] Selector The [attribute$=”value”] selector is used to select those elements whose attribute value ends with a specified value “value”. 
CSS [attribute|=value] Selector This is used to select those elements whose attribute value is equal to “value” or whose attribute value started with “value” immediately followed by hyphen (-).
CSS [attribute~=value] Selector The [attribute~=”value”] selector is used to select those elements whose attribute value contains a specified word. 
CSS [attribute^=value] Selector The [attribute^=value] selector is used to select those elements whose attribute value begins with given attribute.
CSS #id Selector The #id selector is used to set the style of the given id. The id attribute is the unique identifier in an HTML document.
CSS * Selector The * selector in CSS is used to select all the elements in an HTML document.  
CSS :active Selector The :active selector is used in styling an active link of web page. Style display when user clicks on the link.
CSS ::after Selector CSS ::after selector is used to add same content multiple times after the content of other elements. 
CSS ::before Selector CSS ::before selector CSS pseudo-element, is used to add the same content multiple times before the content of other elements
CSS :checked Selector The :checked selector is used to select all checked elements in the input tag and radio buttons.
CSS Class Selector The .class selector is used to select all elements which belong to a particular class attribute
CSS :default Selector CSS :default selector is used to set a default element in a group of same type of element in a form. 
CSS :disabled Selector CSS :disabled selector is used to select the disabled element. This property is mostly used on the form elements. 
CSS element Selector The element selector in CSS is used to select HTML elements which are required to be style
CSS element element Selector The element element selector in CSS is used to select elements inside the elements
CSS element, element Selector The element, element selector in CSS is used to style all comma-separated elements with the same style.
CSS element1~element2 Selector The element1~element2 selector in CSS is used to match the occurrences of element2 followed by element1
CSS :empty Selector The :empty selector is used to select that element that does not contain any children (including text node). 
CSS :enabled Selector The :enabled selector is used to set the background color in the enabled element in a form
CSS :first-child Selector The :first-child selector is used to select those elements which are the first-child elements.
CSS :first-of-type Selector The :first-of-type Selector is used to targeting the first child of every element of it’s parent.
CSS ::first-letter Selector This  is used to apply the style to the first letter of the first line of a block-level element.
CSS ::first-line Selector The ::first-line selector in CSS is used to apply style to the first line of a block-level element.
CSS :focus Selector The :focus CSS pseudo-class Selector is used to target the focused element .
CSS :hover Selector CSS :hover selector CSS pseudo-class is used to style elements when the mouse hovers over them
CSS :indeterminate Selector CSS :indeterminate selector in CSS is used to select any form elements that are in an indeterminate state
CSS :in-range Selector The :in-range selector is used to selecting all elements that are given within a particular range value.
CSS :invalid Selector This :invalid selector is used to select every form elements which does not validate according to the elements
CSS :lang Selector The :lang Selector is used to target the element which is based on language attributes for a specific value.
CSS :last-child Selector The :last-child Selector is used to target the last child element of it’s parent for styling.
CSS :last-of-type Selector The :last-of-type Selector is used to target the last child element of the same type of it’s parent for styling.
CSS :link Selector The :link is used to target the unvisited link for styling not the links which is already visited.
CSS :not Selector The :not(selector) selector is used to style every element that is not the specified by selector
CSS :nth-child() Selector The :nth-child() CSS pseudo-class selector is used to match the elements based on their position in a group of siblings.
CSS :nth-last-child() Selector The nth-last-child() selector in CSS is used to match elements based on their position among the group of siblings, counting from end. 
CSS :nth-last-of-type() Selector The :nth-last-of-type() Selector in CSS is used to style only those elements which are the nth number of child of the parent element.
CSS :nth-of-type() Selector The :nth-of-type() in css Selector is used to style only those elements which are the nth number of child of its parent element.
CSS optional Selector The :optional selector in CSS is used to select and style the form input elements which are optional. 
CSS :only-child Selector The :only-child selector in CSS is used to match every element that is the only child of its parent
CSS :only-of-type Selector The :only-of-type selector in CSS represents only those elements that has no siblings of the given type.
CSS :out-of-range Selector The :out-of-range selector is used to select the elements that are lying outside the given range
CSS ::placeholder Selector This is used to design the placeholder text by changing the text color and it allows to modify the style of the text.
CSS :read-only Selector The :read-only selector is used to selecting an element which is readable only
CSS :read-write Selector The :read-write selector is used to select an element (such as an input text) that is editable by the user. 
CSS :required Selector The required selector is used to select the required element with the required attribute and set the CSS property.
CSS :root Selector The :root selector is used to select all the elements of an HTML Documents
CSS ::selection Selector This  is used to set the CSS property to the part of document that is selected by the user (such as clicking and dragging the mouse across text)
CSS Syntax and Selectors This selector points to the HTML element where the CSS style is to be applied. 
CSS :target Selector The target selector is used to represent a unique element.
CSS : valid Selector The :valid selector is used to select the form elements with a given value that validates according to the elements.
CSS :visited Selector The :visited selector in CSS is used to select the visited links.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!