CSS Selector - Point and Shoot CSS Styles

CSS Selector - Point and Shoot CSS Styles

Just Target the HTML Element and Put your css rule.

ยท

3 min read

Hello , everyone Let's point and shoot !!

But wait wait... you will say like Are you Serious its not BGMI ๐Ÿ˜‚ Am i kidding ??? No not at all , i am talking about point means point to the html elements inside the document. Once you point to the element than you can easily apply style on it. It's So simple, Let's Know more about it .

BGMI.png

Let's know this in detail????

What does CSS selector means ???

CSS selectors are a part of the CSS rule set that selects the element we want to style. They are used in the CSS file or inside the โ€œstyleโ€ tag while declaring the CSS. By using CSS selectors we have flexibility in applying the style to multiple elements at once. The selectors point to the HTML element you want to set the style. The selector is the technic to give any kind of style to your text in your HTML page.

CSS Selector Types ???

1. Universal selector

Universal , Simply means everything by using Universal Selector we are selecting everything on a HTML Page. It's more like CTRL + A in Windows.

We write it using *{ css rules}.

<style> 
* {
  border: 1px solid red;
}
</style>
<ul>
  <li>Ineuron Master in Data Science.</li>
  <li>Ineuron Javascript Bootcamp</li>
  <li>Ineuron Coding Skills</li>
</ul>

2. Individual selector

Individual, Simply means 'Single' or 'Seperate' it means by using this selector we are individually target our HTML tags one by one by using tags , id or class etc.

<style>
 p{
font-size: 1.5rem;
 background-color : #12B0E8;
}

#desc {
font-size: 1.5rem;
 background-color : #12B0E8;
}

.fee{
font-size: 1.5rem;
 background-color : #12B0E8;
}
</style>
  <h1>Welcome to the bootcamp JAVASCRIPT.</h1>
  <p>Know the Javascript depth.</p>
  <p id="desc">This is the description of the text </p>
  <p class="fee"> Rs. 17700 </p>

3. Chained selector

Chained selector means selecting the html element based on "certain condition " and apply the style at once.

<style> 
li.bg-black.text-green {
background-color: #50DBB4;
color: #ffff;
}
</style>
<ul>
  <li class="bg-black text-green">Ineuron Master in Data Science.</li>
  <li>Ineuron Javascript Bootcamp</li>
  <li>Ineuron Coding Skills</li>
</ul>

4. Combined selector

This selector is separated by commas , gives you the freedom to apply css rule at once to multiple html elements.

<style> 
li,p {
background-color: #50DBB4;
color: #ffff;
}
</style>
<p>Welcome to bootcamp course categories. </p>
<ul>
  <li class="bg-black text-green">Ineuron Master in Data Science.</li>
  <li>Ineuron Javascript Bootcamp</li>
  <li>Ineuron Coding Skills</li>
</ul>

5. Child selector

CSS child selectors select an element which is a child of another element.

<style> 
div > p > span > em {
color: red; 
}
</style>
<div>
<p><span>Hello Everyone, <em>I am Child red</em> explaining.</span> <span>Css Selectors <em>Selected</em> elit.</span></p>
</div>
ย