CSS Selectors by mohamed yuusuf

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

Here's what it looks like:

Classes 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 element:

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

Here's what it looks like:

Compound selectors allow multiple selector blocks separated by commas

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

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

Here's what it looks like:

Descendant selectors let us access elements at any depth within the current element

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

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

Here's what it looks like:

A child selector lets us access the next immediate elements inside the current element

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

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

Here's what it looks like:

More than one class can be applied to an element

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

class="add-background add-border"

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

.add-border{
    border: 1px solid #000;
}
.add-background{
    background-color:gold;
            
}

Here's what it looks like: