CSS Selectors Complete Reference

Read

Discuss

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 07 Jun, 2023

CSS ::before selector

PHP String Functions Complete Reference

CSS Selectors Complete Reference

HTML

Please Login to comment...