Omkar Gujja's Blog

Introduction to CSS selectors.

Omkar Gujja's photo
Omkar Gujja
·

3 min read

Introduction to CSS selectors.

Table of contents

CSS Selectors are used to target the elements where the CSS properties need to be used.

There are many ways to target an element, let's understand each of the most commonly used Selectors.

Universal Selector

Syntax

* {
    css declarations;
}

Universal selector (*) is used to select every HTML element on the page. It is used to reset the default parameters value like default margin and padding of HTML element.

Class Selector

Syntax

._class-name_ {
    css declarations;
}

It is used to select the HTML elements with specific class attributes. To select elements with a specific class, write a period (.) character, followed by the name of the class.

CSS Code

.hero {
    font-size : 10px;
}

HTML Code

<body>
    <h1 class="hero">I am header my class-name is hero.</h1>
</body>

Id Selector

Syntax

#_id-name_ {
    css declarations;
}

It is used to select the HTML elements with specific Id attributes. Id attributes are unique to each for each element. To select elements with a specific Id, write a pound (#) character, followed by the Id-value.

CSS Code

#header {
    font-size : 10px;
}

HTML Code

<body>
    <h1 id="header">I am header my Id is header.</h1>
</body>

Group Selector

Syntax

p, h1, h2  {
    css declarations;
}

The grouping selector selects all the HTML elements with the same style definitions. It is used to group the selectors, to minimize the code. To group selectors, separate each element by comma (,) character. CSS Code

p, h1, h2 {
    color: white;
}

HTML Code

<body>
    <h1>I am header-1.</h1>
    <h2>I am header-2.</h2>
    <p>I am paragraph.</p>
</body>

Chained Selector

Syntax

._class-name-1_._class-name-2_ {
    css declarations;
}

Chained CSS selectors allow you to target elements in your HTML document with two or more classes assigned to them.

Note : There is no space character between the two classes above.

CSS Code

.hero.left {
    font-size : 12px;
}

HTML Code

<body>
    <h1 class="hero left">I am header-1.</h1>
</body>

Child element Selector

Syntax

parent > child {
    css declarations;
}

Child selectors can be used to target only the first-level element within the nested elements. This is useful if you have nested elements such as in a dropdown menu contained within an unordered list (ul) element, and only want to style the first level list items.

CSS Code

ul > li{
    background-color : black;
}

HTML Code

<body>
    <ul>
      <li>List-item 1</li>
      <li>List-item 2</li>
    </ul>
</body>

Adjacency Selector

Syntax

prev_elem + traget_elem  {
    css declarations;
}

Adjacency selectors allow you to target elements that are adjacent (next to) each other. The target element and its previous element are separated by a plus (+) character. CSS Code

h1 + p{
    background-color : black;
}

HTML Code

<body>
    <h1>I am header-1.</h1>
    <p>I am paragraph.</p>
</body>

This selects the p tag which is immediately next to h1.

Sibling Selector

prev_elem ~ traget_elem  {
    css declarations;
}

The sibling selector is similar to the adjacency selector, the only difference is that it selects all the targeted-elements, whereas in adjacency selector it selects only the immediate next element.

CSS Code

h1 ~ p{
    background-color : black;
}

HTML Code

<body>
    <h1>I am header-1.</h1>
    <p>I am paragraph 1.</p>
    <h2>I am header-2.</h2>
    <p>I am paragraph 2.</p>
    <p>I am paragraph 3.</p>
</body>

This selects all the p elements which are appearing after h1. It will not select the h2.

Learn Code Onlineiwritecode