CSS Selectors by Myra Rudy

An id 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:yellow;
            }

Here's what it looks like:

A class can be applied to more than one item per page.

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

class="my-list"

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

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

Here's what it looks like:

A compound selector allows for multiple selector blocks separated by commas.

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

li.new-list,div#new-div{
                color:#6e2d2d;
                background-color:aquamarine;
            }

Here's what it looks like:

A descendant selector allows us to access elements at any depth within the cueent element.

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

div.grandKids li{
                background-color:mediumslateblue;
            }

Here's what it looks like:

A child selector allows us to access the next immediate element inside the current element

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

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

Here's what it looks like:

We can add more than one class to an element

Here's how we hook mulitple class attributes to an element:

.add-background{
                background-color: paleturquoise;
                color:black
            }

.add-border{
                border:1px solid black;
            }

Here's what it looks like: