CSS | Selector | Global Attribute | data-

❃ For styling an HTML element the selector detects the target HTML element on a web page.

1. Element selector
   
1. HTML element name (like <p>, <a>, <h1>) match with CSS selector name.
2. Simplest case-sensitive way to target an element or same type of all element.
3. p {  color: red;}
2. Class selector
1. CSS contains a class name followed by dot(.) and HTML element contain class attribute.
2. .myClass {  color: #000; }
3. ID selector
1. CSS contains a ID name followed by dot(.) and HTML element contain ID attribute.
2. Case-sensitive and unique.
3. #myID { color:#000; }
4. Universal selector
1. It allows selecting all elements in a page. As it is rarely used to apply a style to every element on a page, it is often used in combination with other selectors. [Ref[1]].
2. Syntax: * { ... }
5. data-*
6. Attribute selectors
1. Based on element attributes and attributes values.
2. Mainly selector match with attribute name but an optional condition that they may have matched with the attribute value.
3. Depending on the match attribute value:
1. Presence and value attribute selectors [Ref[1]]
1. [attr]: This selector will select all elements with attribute attr, whatever its value. Ex: [data-custom] {...}
1. [attr=val]: If attribute value is exist then it works. Ex. input[type="text"]{...}
2. [attr~=val]: This selector will select those elements where val is one of a space-separated list of word's contained in attr's value. Ex. [data-play~="football"] {  color: red;} (<li data-play="football">Player</li>)  
2. Substring value attribute selectors 
1. Attribute selectors in this class are also known as "RegExp-like selectors", because they offer flexible matching in a similar fashion to regular expression (but to be clear, these selectors are not true regular expression)[Ref[1]].
2. [attr |= val]: Definitely val is exact either alone or single or multiple val starts with val-. [class|=left] { color: green;} 
3. [attr ^= val]: Begins (prefixed) with val.
4. [attr $= val]: Ends (suffixed) with val.
5. [attr *= val]: Like regular expression; if find the val then executed (one occurrence of value within string).
7. Pseudo selectors
1. Pseudo classes
1. Added to a selector that specifies a special state of the selected element(s). [Ref:[1]] 
2. It's apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors.
3. Pseudo class is a keyword.
4. Syntax: selector:keyword{...} Ex. a:hover, a:active { color: silver; }
5. Style the selected element only when it is in a certain state.
2. Pseudo elements
1. Added to a selector that lets you style a specific part of selected items. [Ref:[1]]
2. Pseudo element is a keyword.
3. Syntax: selector::keyword{...} Ex. a:hover, a::after { ... }
4. Can accept single colon but standard CSS3 accept double colon.
5. ::before
1. Creates pseudo element that is the first child of the selected element.
2. Default inline.
3. It is often used to add cosmetic content to an element with the content property.
4. Syntax: selector::before {...}.
5. Don't apply to replaced elements like <img>, or to <br> elements without content property.
6. ::after
1. Creates pseudo element that is the last child of the selected element.
2. Default inline.
3. It is often used to add cosmetic content to an element with the content property.
4. Syntax: selector::after {...}.
5. Don't apply to replaced elements like <img>, or to <br> elements without content property.
7. ::first-letter
1. Applies on first letter + first line + block level element
2. Not allow content  like images or inline tables.
3. Syntax: selector::first-letter {...}.
4. A combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element. In that case, ::first-letter will match the first letter of this generated content [Ref[1]].
8. ::first-line
1. Applies on first line + block level element.
2. Syntax: selector::first-line {...}.
9. ::selection
1. Style (highlight) the test when clicking and dragging the mouse across the text.   
2. Syntax: ::selection {...} or selector::selection {...}.
8. Combinators and groups of selectors
1. Group or selectors (A,B)
1. Any element matching A or/and B.
2. Sample: p, a { ... }
2. Descendant selector (A B or A >> B)
1. Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.). the combinator is one or more spaces or dual greater than signs. [Ref[1]]
2. Sample: table thead th { ... }
3. Direct selector (A > B)
1. An element matching B only when B is the direct child of an element A.
4. Adjacent sibling selector (A + B)
1. Any element matching B that is the next sibling of an element matching A (that is, the next child of the same parent). [Ref[1]]
5. General sibling selector (A~B)
1. Any element matching B that is one of the next siblings of an element matching A (that is, one of the next children of the same parent).
2. Sample: p ~ ul { ... }

⌚ CSS3 Essentials
Ref[1] https://developer.mozilla.org/en-US/docs/Learn/CSS