Best CSS cheat Sheet:
https://htmlcheatsheet.com/css/The best css cheat sheet - https://htmlcheatsheet.com/css//*---- 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.