CodeColt
What are selectors in CSS

What are selectors in CSS

Nikhil Bhosale's photo
Nikhil Bhosale
·

3 min read

CODE💻- Hi all my name is "CODE". I come here to help you for solving your doubt about web development. You can ask me anything about web development!!! I am here to help you...!!!

COLT🐎 - Hey! CODE!! , my name is "COLT", I am a beginner in web development, and I started the CSS part now. I have some doubts regarding "Selector in CSS", Can you help me with that?

CODE💻- Sure!! You can ask me anything!

COLT🐎 - What are Selectors in CSS?

CODE💻- Oh... Ok, let's start then I will give a detailed description of Selectors in CSS.

First, you should know about a basic of CSS...

For applying CSS property on any HTML tag we required their specific identity. Those identities can be specified in different ways. So selectors are basically used to find or select the HTML tag where you want to apply CSS property.

There are different categories of Selectors:

  • Universal Selector :

Universal Selector means it selects all elements in an HTML document. The asterisk (*) is the universal selector in CSS. Example.

* {
 padding: 0;
 margin: 0;
}
  • Type Selector: A type selector selects all HTML elements that have a given node name. This means it selects the HTML tags. “h1” would select all <h1> elements and apply the CSS property values to them. “span” would select all <span> elements and so on.

Example

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selector in CSS</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>This is H1 tag</h1>
    <p> This is P tag</p>
    <Span>This is span tag</Span>
    <h1>This is h1 tag</h1>
</body>
</html>

style.css :

h1{
    background-color: red;
    color: #fff;
}

p{
    color: green;
    font-size: 30px;
}
  • Class and Id Selector

Here we select the element by their class name or Id name. For example, ".main" would select any element that has a class of “main” just as. "#head" would select any element that has a Id "head".

HTML

<div class="container">
        <h1>header 1</h1>
        <h2 id="head">header 2</h1>
</div>

CSS

.container{
    background-color: rgb(179, 157, 157);
    color:black
}

#head{
    color: brown;
    background-color: bisque;
}
  • Attribute Selector

An attribute selector selects all elements that have a given attribute or an attribute set to a specific value. For example, a[href] will match all links, while a[href*=”hubspot”] will only match links with "hubspot" in their URL.

HTML

        <a href="http://blog.com">blog.com</a><br>

        <a href="http://hubspot.com">hubspot.com</a><br>

        <a href="http://google.com">google.com</a><br>

        <a href="http://blog.hubspot.com">blog.hubspot.com</a><br>

CSS

a[href*="hubspot"] {
    background-color:red;

    }
  • Pseudo-class Selector :

A pseudo-class selector applies CSS to a selected element or elements only when in a special state. For example, :hover will only style an element when a user hovers over it. Other common examples are :active, :visited, and :invalid.

Exmaple

HTML

  <ul class="Uolist">
        <li class="item">One</li>
        <li class="item">Two</li>
        <li class="item">Three</li>
       </ul>

CSS

.item:hover{
    background-color: orange;
    padding: 10px;
}
  • Combined Selector -

If we have multiple elements that we want to apply the same CSS then we use this. For example

HTML

        <div>
            <p>This is P tag</p>
            <Span>This is span tag</Span>
        </div>

CSS

p,span {
    background-color: aqua;

}

COLT🐎 - Oh!! now I understand all this. Thank you so much.

CODE💻- If you get any more doubt then definetly ask me. Keep learning!!

CSSwebdev