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;
} */