Selectors
=========

Guide
    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

Quick Reference
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Basic Terms
-----------

* CSS Rules: Target one or more HTML elements, and Define CSS Properties and Their Values
* Selectors: The first part of CSS Selectors
* The Elements that are target of selectors are called Subjects


Selector Types:

    * Basic Selectors:

        * Type (or tag), eg ``body {color: red}``
        * class selector, eg ``.index {color: blue}``
        * ID Selector, eg ``#body_id {display: flex}``
        * attribute selector, eg ``[src]`` or ``a[title]`` or ``a[href="https://example.com"]``
        * Universal Selectors, eg ``* {color: red}`` will match all elements in the document

    * Grouping Selectors (Selector List): ``div, span`` will match both div and span
    * Combinators:

        * Descendant combinators ( A B ) B is contained in A, immediately or not
        * Immediate Child Combinator ( A > B ) B is immediate child of A
        * General Sibling Combinator ( A ~ B ) B follows A, immediately or not
        * Adjacent Sibling Combinator ( A + B ) Meaning B must appear right after A

    Pseudo Selectors:

        * Pseudo Class Selector: Select Elements based on State:

            * :hover
            * :focus
            * :visited (for links)
            * :root (similar to ``html`` Type Selector, but with higher specificity)
            * :last-child

        * Pseudo Elements:

            * ``*::first-line`` (the first line of text of all elements in the document)
            * ``p::first-letter`` (the first letter of text of all ``p`` elements in the document)


Class Selectors
---------------

This code selects all elements that have the class highlight

.. code-block:: css

    .highlight {
        background-color: yellow;
    }

This code selects all <div> elements that also have the class highlight. Notice that there is no space
between the ``div`` and the ``.highlight``.

In other words, this is targeting classes on particular elements

.. code-block:: css

    div.highlight {
        background-color: yellow;
    }

This code selects all elements that have the class ``.highlight`` that are direct or indirect descendants
of a div element. Notice the whitespace between the ``div`` and the ``.highlight``

In other words, this is Descendant combinator

.. code-block:: css

    div .highlight {
        background-color: yellow;
    }

Which is equivalent to (notice the universal selector ``*``)

.. code-block:: css

    div *.highlight {
        background-color: yellow;
    }

This code selects elements that have both classes together, notice the lack of space between the two
class selectors (if there was a space it would be a descendant combinator)

.. code-block:: css

    .notebox.danger {
      border-color: red;
      font-weight: bold;
    }


Universal Selectors
-------------------

Here's a good link to show good use cases for universal selectors

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#using_the_universal_selector_to_make_your_selectors_easier_to_read

This code resets all HTML elements margins, usually find in normalizing stylesheets

.. code-block:: css

    * {
        margin: 0
    }

This This code Doubles the size of text of the first letter of text of all elements in the document

.. code-block:: css

    *::first-letter {
        font-size: 200%
    }


This selector targets all elements that is the first-child if their respective parent, whether or not
The are a direct descendant to an article element.

.. code-block:: css

    article :first-child {
        margin: 0
    }

    /* equivalent to */

    article *:first-child {
        margin: 0
    }

The following selector, on the other hand, does something completely different. It targets article elements
That are themselves the first-child of their respective parents

.. code-block:: css

    article:first-child {
        margin: 0
    }

ID Selectors
------------

An ID selector begins with a # rather than a dot character,
but is used in the same way as a class selector. However, an ID can be used only once per page,
and elements can only have a single id value applied to them.

The first example below selects the element that has the id ``one``.
The second snippet targets a class, and the third targets a specific ID within this class with a
different font property

.. code-block:: css

    #one {
        background-color: yellow;
    }

    .red {
            min-height: 300px;
            min-width: 200px;
            background-color: red;
            font-size: 20px;
        }

    .red#first{
        font-size: 30px;
    }

attribute selectors
-------------------

This is a great reference to lookup

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors#presence_and_value_selectors

Pseudo-Class and Pseudo-Elements
--------------------------------

Here is a good reference:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#reference_section

Inserting content with CSS !!

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after