Note about CSS - part II - vvlnote.github.io

In my previous note, based on w3schools, CSS selectors can be catogorized into 5 categories, they are:

Simple Selector: this has been introduced in my previous note.
**Combinator Selectors **
- Descendant combinator
  The (single space) combinator selects nodes that are descendants of the first element.
  
  Combines 2 selectors such that elements matched by the 2nd selector are selected if they have ancestor (parent, parent’s parent, grand grand parents, etc) element matching the first selector.
  Syntax:
  A B
Reference: Descendant cominator
- Child combinator
  The > cominator selects nodes that are direct childern of the first element.
  
  Elements matched by the 2nd selector must be the immediate children of the elements matched by the 1st selector.
  Syntax:
  A>B
  B is the direct children of A.
  Reference: Child cominator
- General sibling combinator
  The ~ combinator selectos sibling.
  
  Elements matched by the 2nd element follows the 1st (though not necessarily immediately) element, and both elements share the same parent.
  Syntax:
  A ~ B
  Reference: General Sibling combinator
- Adjacent sibling combinator
  The + cominator selectors adjacent siblings.
  
  Element that matched 2nd element directly follows the first element, and both share the same parent.
  Syntax:
  A + B
  all the B elements that directly follow A element.
  Reference: Adjacent Sibling combinator
**Pseudo-class selectors **

The : pseudo allow the selection of elements based on state information that is not contained in the document tree. Pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Ex:
```
  a:hover {
       color: orange;
           }  
```
it means that when the mouse move to the a element, the text in the link will turn orange color, however, when the mouse leaves the a element, the text will turn into it original color.

Standard pseudo-classes:
:active, :checked, :default, :defined, :disabled, :empty, :enabled, :first, :first-child, :first-of-type, :focus, :focus-within, :host, :host(), :hover, :indeterminate, :in-range, :invalid, :lang(), :last-child, :last-of-type, :left, :link, :not(), :nth-child(), :nth-last-child(), :nth-lsat-type(), :nth-of-type(), :only-child, :only-of-type, :optional, :out-of-range, :read-only, :read-write, :required, :right, :root, :scope, :target, :valid, :visited

for the example of each pseudo-class selector, please refer to Pseudo-classes
Pseudo-elements selectors
The :: pseudo represent entities that are not included in HTML.

Pseudo-element is a keyword added to a selector that lets you style a specific part of the seleclted element(s).
Note: a selector can only have one pseudo-element, and this pseudo-element must appear after the simple selector in the statement.

Standard pseudo-elements:
::after, ::before, ::cue, ::cue-region, ::first-letter, ::first-line, ::selection, ::slotted()

for the examples of each pseudo-element selector, please refer to Pseudo-elements
Attribute selectors
It is used to select an element with some specific attribute or attribute value. This is an excellent way to style the HTML elements by grouping them based on specific attributes and teh attribute selector will select those elements with similar attritubes.
Note: id and class are all attributes, so they can be used in Attribute selectors as well.
Syntax:
- [attribute] => Elements with this specific attribute.
- [attritube=”value”] => Attribute exactly matchs the value.
- [attribute*=”value”]=> Attribute Contains this specified value.
- [attritube^=”value”] => Attribute value begings with certain value.
- [attribute$=”value’] => Attribute value ends with certain value.
- [attribute~=”value”] => Attribute is within Space Separated List.
- [attribute = “value’] => Attribute is within Dash Separted List.
- [attribute1=”value”] [attribute2^=”value2”] => Mutiple Attributes Matches.
Note: more detail, please refer to The Skinny on CSS Attribute Selector

Note: the general rule of selectors please refer to: CSS Seelector Reference