CSS Selectors by Priscila Garcia-Mendoza

ids can be applied to only one item on a page

Here's how we hook an id attribute to an element:

id="id-div"

Here's how the CSS is applied to the element:

div#id-div{
    background-color:lightblue;
}

Here's what it looks like:

classes can be applied to several items to a page

Here's how we hook a class attribute to an element:

class="my-list"

Here's how the CSS is applied to the element:

li.my-list{
    background-color:pink;
}

Here's what it looks like:

Compounds selectors allow us to use more then one selector for a set of rules. The selectors must be separated by commas.

Here's how the CSS is applied to the element:

div#new-div,li,new-list{
    background-color:lavender;
}

Here's what it looks like:

The child selector allows us to access the elements that are immediately inside the current element.

Here's how the CSS is applied to the element:

ul.my-kids > li{
    background-color: lightgreen;
}

Here's what it looks like:

The descendant selector selector allows us to hook to an element at any depth inside the current element.

Here's how the CSS is applied to the element:

div.grandkids li{
    background-color: lightsalmon;
}

Here's what it looks like:

we can apply multiple classes by placing them in the class attribute with a space between each.

Here's how we hook a multiple classes to an element:

class="add-border add-background"

Here's how the CSS is applied to the element:

.add-background{
    background-color: #antiquewhite;
    }
.add-border{
    border-color: #000;
    }

Here's what it looks like: