An introduction to CSS Selectors

CSS

CSS stands for Cascading Style Sheet, CSS is used to style the webpage which is structured using HTML.

CSS Selectors

While styling the HTML page we often have to select the different parts of the page, we select parts of the page by using selectors. Selectors can be of different types such as ID selector, universal selector, class selector, etc.

Types of Selectors

There are many types of selectors but in this article we are going to focus only on the most used ones.

• Universal selector The Universal selector targets all the elements of the HTML document. Universal selector is used using the * symbol only.

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

• ID selector The ID selector can target an HTML element with the specified ID attribute, and an element with ID is selected using the # symbol as a prefix. The ID selector can only be used only once in an HTML document.

#idName {
    /* this will seleect the id named idName */
}

• Class selector The class selector can target an element with the given class attribute. The element with the class selector can be selected using the . symbol.

.className {
    /* this will select the class named className */
}

• Individual selector The Type selector targets only the selected element of the HTML document. A individual selector is used using the element name. For example -

p {
    /* this will select the <p> element */
}

img {
    /* this will select the <img> element */
}

Now we will look at some CSS Combinators -

CSS Combinators are the relationship between two or more selectors which we can combine according to our requirements

Descendant selector

The descendant selector selects all the children of the specified element. This selector is represented with a single space (" ").

• Child Selector The Direct child selector selects only the direct child of the element. And it is represented with a ( > ) sign.

ul > li {
    /* this will select all the <li>
    elements which are the direct children
    of the list */
}

• Adjacent sibling selector The sibling selector will target the immediate next element of the specified element which share the same parent. This selector is represented with a ( + ) sign

img + p {
    /* this will select the immediate next <p>  
        element which is next to the
       <img> element  */
}

• General Sibling Selector This type of sibling selector will target all the next sibling elements of the specified elements, which share the same parents. This selector is represented with a ( ~ ) sign.

img + p {
    /* this will select the all the <p>
        elements which are next to the
        <img> element  */
}