Vikash Yadav's Blog

Follow

Vikash Yadav's Blog

Follow

Let's Understand CSS(Cascading Stylesheets) Selectors.

Let's Understand CSS(Cascading Stylesheets) Selectors.

Vikash Yadav's photo

··

8 min read

Table of contents

What are CSS Selectors?

What are CSS Selectors?

CSS selectors are used to target and style the HTML elements with the defined types of selectors. The HTML element which is selected by the selector is called the subject of the selector. Inside selector, we define the property which we want to apply, and corresponding to it we provide some values.

Syntax: Selector { Property: values; }

For example:

    <body>
     <h1>Hello World</h1>
     </body>

CSS Style:

h1{
        background-color: red;
        color: white;
        font-size: 20px;
    }

Output: Screenshot (198).png

Basic CSS Selectors

There are five basics or simple selectors.

1. Universal Selector. ( * )

The universal selector selects all the HTML elements on the page. Generally, developers use it to reset the properties like margin, padding, and box-sizing.

Syntax: *{ Property: values; }

For example:

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

2. Type Selector.

The type selector selects the HTML's tag name to style the elements or you can say that it selects all the name tags present in the HTML document.

Syntax: element{ Property: values; }

For example:

     <body>
     <h1>Hello World</h1>
      <p> This is CSS Selector article </p>
     </body>

CSS Style:

h1{
        background-color: red;
        color: white;
        font-size: 20px;
    }

p{
 font-size: 14px;
}

3. Class Selector.

The class selector is used to select specific multiple elements to apply the same style to all. Elements are selected by the provided class and it uses a dot( . ) before the class name.

Syntax: .className{ Property: values; }

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <p>This is CSS Selector article</p>
</body>

CSS Style:

.large-text{
        background-color: red;
        color: white;
        font-size: 20px;
    }

4. Id Selector.

The id selector is used to select a unique element to apply the style. Element is selected by the provided id and it uses a hash( # ) before the Id name.

Syntax: #idName{ Property: values; }

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <p id="small-text">This is CSS Selector article</p>
</body>

CSS Style:

#small-text{
        background-color: red;
        color: white;
        font-size: 20px;
    }

5. Attribute Selector.

The attribute selector targets the elements which match the selected attribute. It uses a square bracket " [ ] " to select the attribute.

Syntax: element[attributeName]{ properties : vlaues};

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <p id="small-text">This is CSS Selector article</p>
    <input type="text" name="name">
</body>

CSS Style:

input[type="text"]{
        background-color: red;
        color: white;
        font-size: 20px;
    }

5.a. Different ways to Select Attributes.

Has Attribute [a] Select elements that have that attribute

CSS Style:

/*Select the elements with the ' a ' attribute*/
element[a]{
        style properties
    }

Bolded and Italic attributes are selected.

Result: [a] [a="1"] [c] d

Exact Attribute [a="1"] Select elements that have that attribute with exactly that value

CSS Style:

/*Select the elements with the ' a ' attribute with a value of 1*/
element[a="1"]{
        style properties
    }

Bolded and Italic attributes are selected.

Result: [a] [a="1"] [c] d

Begins With Attribute [a^="1"] Select elements that have that attribute which starts with that value

CSS Style:

/*Select the element with the ' a ' attribute which start with a value that starts with 1*/
element[a^="1"]{
        style properties
    }

Bolded and Italic attributes are selected.

Result: [a="12"] [a="21"]

End With Attribute [a$="1"] Select elements that have that attribute which ends with that value

CSS Style:

/*Select the element with the ' a ' attribute which start with a value that ends with 1*/
element[a$="1"] {
        style properties
    }

Bolded and Italic attributes are selected.

Result: [a="12"] [a="21"]

Substring Attribute[a*="1"] Select elements that have that attribute which contains that value anywhere

CSS Style:

/*Select the element with the ' a ' attribute which start with a value that contains a 1*/
element[a*="1"]{
        style properties
    }

Bolded and Italic attributes are selected.

Result: [a="12"] [a="21"]

Grouping Selector

Selector list

The selector selects multiple elements and applies the same CSS style but all elements must be separated with a comma (, ).

Syntax: elementA, elementB , .ClassName{ properties : vlaues};

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <h3> Hashnode</h3>
    <p id="small-text">This is CSS Selector article</p>
    <input type="text" name="name">

</body>

CSS Style:

h1, p {
        background-color: red;
        color: white;
        font-size: 20px;
    }

Combinators

1. Descendant Selectors

Select elements that are descendent of the first element or in another way select elements inside of the first element or parent node. There must be space between the elements.

Syntax: elementA elementB{ properties : vlaues};

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <div>
    <p id="small-text">This is CSS Selector article</p>
    <input type="text" name="name">
   </div>
</body>

CSS Style:

div p{
        background-color: red;
        color: white;
        font-size: 20px;
    }

2. Child Selectors

Select the elements that direct child of the first element or in another way select the only direct child of the parent node. Select the child node with the greater than symbol ( >) after the parent node or first element.

Syntax: elementA > elementB{ properties : vlaues};

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <div>
    <p id="small-text">This is CSS Selector article</p>
    <input type="text" name="name">
   </div>
</body>

CSS Style:

div > p{
        background-color: red;
        color: white;
        font-size: 20px;
    }

3. General Sibling

Select all the sibling nodes or elements of the first element which comes after it. Select the sibling nodes with the tilde symbol ( ~) after the first element.

Syntax: elementA ~ elementB{ properties : vlaues};

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <input type="text" name="name">
    <div>
    <p id="small-text">This is CSS Selector article</p>
   </div>
  <input type="text" name="email">
 <input type="button" name="submit"> 
</body>

CSS Style:

div ~ input{
        background-color: red;
        color: white;
        font-size: 20px;
    }
/*select all the inputs elements that are the sibling of the div element and come after the div element. */

4. Adjacent Sibling

Select the only sibling node or element of the first element which comes directly after the first element. Select the sibling node with the plus symbol ( +) after the first element.

Syntax: elementA + elementB{ properties : vlaues};

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <input type="text" name="name">
    <div>
    <p id="small-text">This is CSS Selector article</p>
   </div>
  <input type="text" name="email">
 <input type="button" name="submit"> 
</body>

CSS Style:

div + input{
        background-color: red;
        color: white;
        font-size: 20px;
    }
/*select only the input element that is the direct sibling of the div element and 
come directly after the div element.  

In above example input element will be selected having attribute [name="email"].*/

Pseudo Selectors

1. Pseudo Elements

By the use of pseudo-elements, we can add elements in an HTML document but that will not be visible in the document file. To use pseudo-elements must add a double colon (:: ) after the element. Some of the pseudo-elements are listed below:-

Before Selector

Before selector, add an empty element directly before the selected element's children

Syntax: element::before{style properties}

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <p id="small-text">This is CSS Selector article</p>

</body>

CSS Style:

h1{
    text-align: center;
    position: relative;
}

h1::before{
    content: "CSS ";
    position: absolute;
    background-color: orange;
    display: block;
    top:20%;
    left: 20%;
    width: 30px;
    height: 50px;
    padding: 20px;
    color:black;
}

Output: Screenshot (202).png

After Selector

After selector, add an empty element directly after the selected element's children

Syntax: element::after{style properties}

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <p id="small-text">This is CSS Selector article</p>

</body>

CSS Style:

h1{
    text-align: center;
    position: relative;
}

h1::after{
    content: "Selectors ";
    position: absolute;
    background-color: orange;
    display: block;
    top:20%;
    left: 80%;
    width: 30px;
    height: 50px;
    padding: 20px;
    color:black;
}

Output: Screenshot (203).png

2. Pseudo Class

Pseudo-classes are used when we want to add style based on a specific state. To use pseudo-classes must add a colon (: ) after the element or selectors. Some of the pseudo-classes are listed below:-

Hover : Select elements that are hovered by the mouse

Syntax: selector:hover { property: value; }

Focus : Select elements that are focused

Syntax: selector:focus { property: value; }

Visited : Select elements that are visited

Syntax: selector:visited { property: value; }

Active : Select elements that are active

Syntax: selector:active { property: value; }

Required : Select inputs that are required

Syntax: selector:required { property: value; }

Checked : Select elements that are checked

Syntax: selector:checked { property: value; }

Disabled : Select elements that are disabled

Syntax: selector:disabled{ property: value; }

First Child

Select elements that are the first child inside the container Syntax: selector:first-child { property: value; }

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <div>
   <input type="text" name="name">
   <input type="text" name="email">
   <input type="button" name="submit"> 
    <p id="small-text">This is CSS Selector article</p>
   </div>

</body>

CSS Style:

input:first-child{
        background-color: red;
        color: white;
        font-size: 20px;
    }
/*selects the input element that is the first child of the div element.*/

Last Child

Select elements that are the last child inside the container Syntax: selector:last-child { property: value; }

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <div>
   <input type="text" name="name">
   <input type="text" name="email">
   <input type="button" name="submit"> 
    <p id="small-text">This is CSS Selector article</p>
   </div>

</body>

CSS Style:

input:last-child{
        background-color: red;
        color: white;
        font-size: 20px;
    }
/*selects the input element that is the last child of the div element.*/

Nth Child

Select elements that are the nth child inside the container based on the formula Syntax: selector:nth-child(2n) { property: value; }

For example:

<body>
    <h1 class="large-text">Hello World</h1>
    <div>
   <input type="text" name="name">
   <input type="text" name="email">
   <input type="button" name="submit"> 
    <p id="small-text">This is CSS Selector article</p>
   </div>

</body>

CSS Style:

/*
nth-child(2n)
where n=1, so nth-child(2).
*/
input:nth-child(2){
        background-color: red;
        color: white;
        font-size: 20px;
    }
/*selects the second input element that is the 2nd position child of the div element.*/

CSS css_selector HTML5 CSS3