Breaking News: Grepper is joining You.com. Read the official announcement!

CSS Selectors Cheat Sheet

Add Answer

paramjeetdhiman answered on January 4, 2021 Popularity 10/10 Helpfulness 1/10

answer CSS Selectors Cheat Sheet

related css cheat sheet

related css syntax cheat sheet

CSS Selectors Cheat Sheet

Comment

/*---- Ultimate CSS Selectors Cheat Sheet ----*/

Tag Selector - h1{},h2{},body{},p{},div{}

ID Selector -  #my_id{}

Class Selector - .my_class{}

Grouping the CSS Selectors -  #my_id, p {}
	- multiple elements will have the same styling

Universal Selector - *{}

Specific Class Selector -     h1.my_class {}
	- select only a particular element rather than all with the same class

/****CSS Combinator Selectors****/

Descendant Selector -   div p {}
	- separating two elements with space where the second element is required to be the descendant of the first element.	
	- relationship “descendant” symbolises that the element should be inside another element (before the first element tag has been closed).

Child Selector -  div > h3 {}
	- the second element should be a child of the first element
	- child selector is defined with the “>” symbol which symbolizes that the second element is the child of the first element

Adjacent Sibling Selector -  div + h3 {}
	- All the other elements sequences are ignored, and only the directly followed element is considered.
	- following example, we check for the adjacent “h3” tag inside the “div” tag.

General Sibling Selector -  div ~ h3 {}
	- CSS general sibling selector selects all the siblings

Pseudo-Class Selectors - a:visited, a:hover, a:active, li:first-child

Pseudo Element Selectors -  p::selection{},  p::before{},  p::after{}



/***********Attribute Selectors **********/
Requires just the attribute name in the parameters

- p[lang]{}
	- following code performs CSS styling on the “p” elements that have the “lang” attribute:
 
CSS [Attribute = Value] Selector   - p[lang = "hi"]{}
	- only the attribute “lang” with a value “hi” is selected

CSS [Attribute ~= “Value”] Selector - p[title ~= "shirt"]{}
	- select the element if it includes the word “value” in the attribute specified

CSS [attribute |= “value”] Selector  -   p[title |= "shirt"]{}
	- selects all those attribute values that start with the word “value”
	- selector works only when the value is either a single word in the attribute such as only “shirt” or is hyphenated as “shirt-blue”. White space in between will not be selected by the CSS for styling. The value has to be one word.

CSS [attribute ^= “value”] Selector -  p[title ^= "shirt"]{}
	- Any value that starts with the word “value” will be selected for styling

CSS [attribute $= “value”] Selector  -  p[title $= "shirt"]{}
	- the $ attribute selector finds the ending with the word “value”

CSS [attribute *= “value”] Selector -  p[title *= "rt"]{}
	- selector works like the regular expression checker which selects every element with the target attribute having value composed of “value”.
	-  The value need not be a whole word. The selector works even if the “value” is a part of the attribute value.

Popularity 10/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: css css-selectors

Link to this answer
Share Copy Link

Contributed on Nov 01 2022

paramjeetdhiman

0 Answers Avg Quality 2/10

Closely Related Answers

css cheat sheet

Comment

Best CSS cheat Sheet:
https://htmlcheatsheet.com/css/

Popularity 10/10 Helpfulness 5/10 Language css

Source: htmlcheatsheet.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Jan 04 2021

Lorenzo Satta Chiris

0 Answers Avg Quality 2/10

css syntax cheat sheet

Comment

<a href="https://htmlcheatsheet.com/css/" target="_blank">CSS Syntax Cheat Sheet</a>

Popularity 9/10 Helpfulness 1/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

CSS Selectors Cheat Sheet

Contents

More Related Answers

CSS Selectors Cheat Sheet

Closely Related Answers

css cheat sheet

css syntax cheat sheet

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.