CSS - SELECTORS

    // SELECTORS
    * {padding: 0;} //all
    p, h1, span{color: blue;} //group several
    #number1 {text-align: center;} //id
    p.center {text-align: center;} //paragraph with class="center"
    .center {color: red;} //class
    [attr=value] //attribute value
    [class*="bg-"] //all classes that start with 'bg-'
    .class1.class2  .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
    .class1 .class2  name1 .name2  Selects all elements with name2 that is a descendant of an element with name1

    // ADVANCED
    A + B // Adjacent sibling from same parent, A is followed inmediately by B
    A ~ B // elements share same parent, A comes before
    A > B // B is direct child of A 
    A   B  // B is descendant of A, not necessarily direct

    > direct child, not second child
    Sibling: h2 ~ p every single sibling that is p and AFTER the h2
    + The direct sibling, the one after
    Not selector. p:not(.green):not(.red). Good for input:not(:checked)
    input[type="text"]{ background-color: red; }
    input:not(:checked){ margin: 50px; }
    input[data-margin]{ margin: 100px; } or input[data-margin="ffasdasd"]{ margin: 100px; }
    *: anything that contains - Ex: input[data-margin*="ffasdasd"]{ margin: 100px; }
    $: anything that ends with - Ex: input[data-margin$="ffasdasd"]{ margin: 100px; }
    ^: anything that starts with - Ex: input[data-margin^="ffasdasd"]{ margin: 100px; }