CSS Selectors Cheatsheet

Name

Description

Example

Universal Selector

Select all the elements in the HTML document.

 
                        *{
                            background-color: #d2691e;
                        }

ID Selector

Select unique element with the specific id attribute.

 
                        #blog-container{
                            background-color: #c1988b;
                        }

Class Selector

Select elements with the specific class attribute.

 
                        .color-box{
                            border: 2px solid #00bfff;
                        }

Element Selector

Select all elements with the specified element name.

 
                        a{
                            text-decoration: none;
                            padding: 2rem;
                        }

Attribute Selector

select HTML elements that contains specific attributes.

 
                        [href]{
                            margin: 3rem auto;
                        }

Descendant Selector

Select elements that are nested within other HTML elements

 
                        header h1{
                            background-color: #ffa07a;
                        }

Adjacent Selector

Select elements which is directly after another specific element.

 
                        ul li{
                            padding: 1.5rem;
                        }