div {
    border: 2px solid red;
    margin: 10px;
    padding: 10px;
}

/* ⁡⁢⁣⁢Demo 1 - Basic Selectors⁡ */

/* Universal selector */

 * {
    color: blue;
}

/* Element selectors */

 h1 {
    color: red;
}

p {
    color: green;
}

/* ID Selector

    What if I wanted to select only paragraph 8 and make it another colour?    We can use ID selectors - note that we will have to add an attribute to our tag*/

 #myId {
    color: aqua
}

/* a couple things:  an ID SHOULD be unique.  We should not make two elements with the same ID.  It turns out that browsers will still render it but it is not correct.  */

/* Class ID

If we want to choose multiple elements, we should use a class.  Classes can be applied to multiple elements. */

 .myclass {
    color: rgb(34, 226, 107);
}

/* Grouping selectors - What if I wanted to select paragraphs and h2s together */

/* p, h2 {
    color: blueviolet;
} */

/* ⁡⁢⁣⁢Demo 2 Combinator Selectors⁡ */


/* Descendent selectors 

what if I want to change only the paragraphs that are inside of div1 to blue */

 /*#div1 p {
    color:blue;
} */

/* OK, that even changed the grandchildren.  We can choose only the ummediate child selectors (no grandchildren) */

/* #div1 > p{
    color:blue;
} */


/* Next sibling selector 
What if we want to change the colour of the first paragraph that comes after an h2 tag but nothing else
*/


 /*h2 + p {
    color:red;
}*/


/* general sibling selector  - All siblings after the target*/

 #myId ~ p{
    color: aqua;
}


/* ⁡⁢⁣⁢Demo 3 - Attibute Selectors ⁡*/

/* Attribute selectors  */
/* Just the presence of the abc attribute */

/* [href]  
{
    color: red;
} */

/* Attribute and value must match */
[href="abcdef"]
{
    color:orange;
}

/* can use a wildcards too */

/* match any */

 [href*="bc"] {
    color: deeppink;
}

/* match beginning */

/* [href^="abc"]{
    color: aqua;
} */

/* match end */

/* [href$="fgh"]{
    color: brown;
} */

/* ⁡⁢⁣⁢Demo 3 - Pseudo-classes⁡ */

/* 

These select elements based on state or position.
There are a lot!  We will look at a couple
*/

p:hover {
    background-color: blue;
    color: yellow;
}

 [type="checkbox"]:checked+span {
    background-color: orange;
}

/*nth-childs*/

 p:nth-child(even) {
     background-color: aliceblue;
     margin: 0;
     padding: 15px;
 }

 p:nth-child(odd) {
     color: blue;
     margin: 0;
     padding: 15px;
 }

 p:not(#myId)
{
    color:purple
}

/*There are a bunch of these and worth exploring! */

/* ⁡⁢⁣⁢Demo 4 - Pseudo-elements⁡

These target specific parts of elements.

Selector	Description	Example
::before	Insert content before element	p::before { content: "*"; }
::after	Insert content after element	p::after { content: ";"; }
::first-letter	First letter of text	p::first-letter {}
::first-line	First line of text	p::first-line {}
::selection	Highlighted text selection	::selection { color: red; } */

 p::before {
    content: "Yay! ";
}

 p::first-letter {
    color: aqua;
     font-weight: bold;
     font-size: 20px;
}