CSS
All About Selectors

/* AZUL CODING --------------------------------------- */
/* CSS - All About Selectors */
/* https://youtu.be/l6_82za_J50 */


/* BEGINNER */

* {
    /* Selects all elements */
}
p {
    /* Selects all p elements */
}
h1, p {
    /* Selects all h1 and p elements */
}
div p {
    /* Selects p elements that are inside div elements */
}
#myid {
    /* Selects the element with myid as its ID */
}
.class2 {
    /* Selects all elements with class set to class2 */
}
p.class2 {
    /* Selects all p elements with class set to class2 */
}
.myclass.class2 {
    /* Selects elements that have both myclass and class2 set as their class */
}
.myclass .class2 {
    /* Selects elements in class2 that are inside elements in myclass */
}

/* INTERMEDIATE */

div > p {
    /* Selects p elements where their parent is a div element */
}
section + p {
    /* Selects all p elements placed immediately after div elements */
}
h2 ~ section {
    /* Selects all section elements that are preceded by h2 elements */
}
input:focus {
    /* Selects elements that are currently focused */
}
a:hover {
    /* Selects links that are being hovered over */
}
a:active {
    /* Selects links that are currently being selected */
}
a:visited {
    /* Selects all links that have been visited */
}
span:nth-child(3) {
    /* Selects the third span element of its parent */
}
span:nth-child(odd) {
    /* Selects odd numbered span elements of its parent */
}
span:nth-child(even) {
    /* Selects even numbered span elements of its parent */
}
a::after {
    /* Allows you to add content after an a element */
}
a::before {
    /* Allows you to add content before an a element */
}

/* ADVANCED */

[target] {
    /* Selects all elements with a target attribute */
}
[target=_blank] {
    /* Selects all elements with a target attribute set to _blank */
}
a[href^="azul"] {
    /* Selects all a elements that have a href attribute starting with "azul" */
}
a[href$="azul"] {
    /* Selects all a elements that have a href attribute ending with "azul" */
}
a[href*="azul"] {
    /* Selects all a elements that have a href attribute containing "azul" */
}
p:first-of-type {
    /* Selects the first p element in every parent element */
}
p:last-of-type {
    /* Selects the last p element in every parent element */
}
:not(a) {
    /* Selects every element that is not an a element */
}