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 immediate child selectors (no grandchildren) */

/* > changes only the specified things that are inside the first selector*/
/* #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
*/

/*+ means it finds the immediate child of whatever the first selector is*/
/* h2+p {
    color: red;
} */


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

/* ~ only selects the specified things that are after whatever the first selector is*/
/* #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
*/
/*When the p is hovered, do the ruleset*/
/* p:hover {
    background-color: blue;
    color: yellow;
} */

/*When the checkbox is checked make the span background orange*/
/* [type="checkbox"]:checked+span {
    background-color: orange;
} */

/*nth-childs*/
/*For every even p apply the ruleset*/
/* p:nth-child(even) {
    background-color: aliceblue;
    margin: 0;
    padding: 15px;
} */

/*For every odd p apply the ruleset*/
/* p:nth-child(odd) {
    color: blue;
    margin: 0;
    padding: 15px;
} */

/*all p that do not have the given ID or class apply the ruleset*/
/* 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;
} */