CODE EXAMPLE FOR CSS

CSS Selectors Cheat Sheet

/*---- 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.