css selector

##what is css selector?

it is Way where we select a Html element and which we want to design.

##types of major Css selector

universal selector
individual selector
and selector (chained)
class and id selector
combined selector
inside an element
direct child
sibling selector

### what is universal selector ?

The universal selector provided by CSS helps in choosing any elements within the HTML page. It goes with a single element and uses the asterisk ("*") symbol used for denoting the selector as a universal selector.

<!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>css</title>
</head>
<style>

  * {
        color:red; 
        background-color:white; 
    }
</style>
  <body>
    <h1>hey this my first hadding tag</h1>
  </body>
</html>

### what is individual selctor ?

it is Type of selector where we select a particular element tag inside body tag and Design them.

<!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>css</title>
</head>
<style>
  nav {
     color:blue;
      background-color:yellow;
 }
h3{
  color:red;
background-color:black;
}
</style>
  <body>
    <h1>hey this my first hadding tag</h1>
<nav>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, eum excepturi! Libero atque, ea vel iusto corrupti cumque tempore optio facilis nisi sed repudiandae ad, similique possimus velit quos ducimus.
             </h2>
             <p>this is lorem text not specific</p>
</nav>
   <h3>hey this is my 2nd hadding tag</h3>
  </body>
</html>

### what is Class and Id selector?

Id selector-Id selector begins with a # rather than a full stop Character, but is used in the same way as a class selector. An ID however can be used only once per document, and elements can only have a single id value applied to them.
class selector-The class selector starts with a dot (.) character. It will select everything in the document with that class applied to it. In the live example below we have created a class called highlight, and have applied it to several places in my document. All of the elements that have the class applied are highlighted.

<!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>css</title>
</head>
<style>
  .blog {
     color:red;
  }
#abc {
  color:green;
}
</style>
  <body>
    <h1>hey this my first hadding tag</h1>
<nav>
<h2 class="blog">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, eum excepturi! Libero atque, ea vel iusto corrupti cumque tempore optio facilis nisi sed repudiandae ad, similique possimus velit quos ducimus.
             </h2>
             <p id="abc">this is lorem text not specific</p>
             <P class="blog">this is my second paragraph</P>
</nav>
  </body>
</html>

### what is combined selector?

it is type of select where we select many html tag together using (,) selcetor and design them.

<!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>css</title>
</head>
<style>
  nav, h3, p {
  color:blue;
background-color:green;
}
</style>
  <body>
    <h1>hey this my first hadding tag</h1>
<nav>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, eum excepturi! Libero atque, ea vel iusto corrupti cumque tempore optio facilis nisi sed repudiandae ad, similique possimus velit quos ducimus.
             </h2>

</nav>
 <h3>this is wrong path</h3>
<p>this is lorem text not specific</p>
  </body>
</html>

### what is and selector (chained)?

<!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>css</title>
</head>
<style>
 .bo-log.david.aa
{
 color:red;
background-color:blue;
}
</style>
  <body>
    <h1>hey this my first hadding tag</h1>
<nav>
<div>
    <P class="a">here are some boys you now them</P>
    <ul>
        <li id="b">dhruv</li>
        <li class="bo-log david aa">aakash</li>
        <li class="bo-log">vishal</li>
        <li>vinod</li>
        <li>seru</li>
    </ul>
</body>
</html>

### what is inside an element selector?

it is Type of selector where we select a sub child of child element design them.

<!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>css</title>
</head>
<style>
  div ul li {
     color:red;
      background-color:yellow;
 }
</style>
  <body>
    <h1>hey this my first hadding tag</h1>
<nav>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, eum excepturi! Libero atque, ea vel iusto corrupti cumque tempore optio facilis nisi sed repudiandae ad, similique possimus velit quos ducimus.
             </h2>
             <p>this is lorem text not specific</p>
</nav>
<div>
    <li>ppppppppp</li>
    <ul>
       <li>ksc</li>
       <li>ssss</li>
       <li>aaa</li>
    </ul>
  </div>
  </body>
</html>

### what is direct child element?

it is type of element where we select a child element of any element and design them.

<!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>css</title>
</head>
<style>
  div li {
     color:red;
      background-color:yellow;
 }
</style>
  <body>
    <h1>hey this my first hadding tag</h1>
<nav>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, eum excepturi! Libero atque, ea vel iusto corrupti cumque tempore optio facilis nisi sed repudiandae ad, similique possimus velit quos ducimus.
             </h2>
             <p>this is lorem text not specific</p>
</nav>
<div>
    <li>ppppppppp</li>
    <ul>
       <li>ksc</li>
       <li>ssss</li>
       <li>aaa</li>
    </ul>
  </div>
  </body>
</html>

### what is sibbling (or +) selector ?

<!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>css</title>
</head>
<style>
  .sibbling + li {
     color:red;
      background-color:yellow;
 }
</style>
  <body>
    <h1>hey this my first hadding tag</h1>
<nav>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, eum excepturi! Libero atque, ea vel iusto corrupti cumque tempore optio facilis nisi sed repudiandae ad, similique possimus velit quos ducimus.
             </h2>
             <p>this is lorem text not specific</p>
</nav>
<div>
    <ul>
       <li class="sibbling">ksc</li>
       <li>ssss</li>
       <li>aaa</li>
    </ul>
  </div>
  </body>
</html>

##what is after pseudo selector ?

It is a generated content element that adds any kind of content after the content. It can be used to insert any kind of content, including characters, strings of text, and images. The value is defined by the content property. By default, the ::after pseudo-element is inline. It can be animated, positioned or floated like any other content.

<!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>csspart 2</title>
</head>
<style>
    body {
        background-color: rgb(45, 42, 42);
        color:white;    
    }
    .your_name::after{
        content: '';
        display:block;
        width: 20px;
        height:20px;
        border-radius: 10px;
          background-color:orange;
    }
</style>
<body>
    <form action="">
    <label class="your_name">name</label>
    <input type="name" required>
    <label class="your_email">email</label>
    <input type="email">
    <button>submit</button>
    </form>
</body>
</html>

## what is before pseudo selector?

The ::before pseudo-element is a generated content element that adds any kind of element before the content. It can be used to insert any kind of content, including characters, strings of text, and images. The value is defined by the content property. By default, the ::before pseudo-element is inline.

<!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>csspart 2</title>
</head>
<style>
    body {
        background-color: rgb(45, 42, 42);
        color:white;    
    }
     .your_name::before {
        content: '';
        display:block;
        width: 20px;
        height:20px;
        border-radius: 10px;
          background-color:orange;
    }
</style>
<body>
    <form action="">
    <label class="your_name">name</label>
    <input type="name" required>
    <label class="your_email">email</label>
    <input type="email">
    <button>submit</button>
    </form>
</body>
</html>

Css selector

Subscribe to my newsletter

Dhruv sharma

Dhruv sharma