CSS is the most important thing while designing a website. Selectors are one of the most important and basic concepts in CSS.
If you are a beginner in learning CSS then you must have a knowledge of selectors because we can apply CSS on HTML elements with the only help of selectors. In this article, you will learn complete concepts of selectors in CSS with examples.
So what are the selectors?
Let's learn with a simple example:
p{
color:red;
margin: 0px;
}
There are different types of selectors in CSS some of them are basic and important which are listed below:
- Simple selector
- Combinator selector
- Simple selector :
We can use simple selectors in three ways:
- with based on the element
- based on class
- with based on id
based on the element
in this type, we can directly apply CSS on HTML elements with element names like:
ul{
padding-left: 300px;
top: 40px;
left: 400px;
position:absolute;
}
li{
padding-left: 20px;
display: inline-block;
cursor: pointer;
font-weight: 500;
}
p{
color:red;
}
Based on class:
based on class means CSS will apply through the value of the class attribute.
<body>
<div class="cls1">this is div 1 </div>
<p class="cls1">
this is paragraph1</p>
<h4 class="cls2">this is h4 tag</h4>
</body>
.cls1{
color:green;
}Based on id:
based on id means CSS will apply through the value of the id attribute.
#id_p1{
color:yellow;
}So in the above example, an element with "id_p1" will apply CSS.
- Combinator selector
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS:
- Descendant selector
- Direct child selector
- Adjacent selector
- General sibling selector
Before we start to learn combinator selectors, you must first have a clear knowledge of parent and child concepts and sibling knowledge. Below that is explained in brief:
<div class="out_div"><!--parent of inner_div and grandparent of h3-->
<div class="inner_div"><!--parent of h3 and child of out_div-->
<h3>parent,child,sibling</h3><!--child of inner_div and grandchild of out_div-->
</div>
</div>[1] Descendant selector
Example:
.div_outer h1{
color: red;
}In the above example, we want to apply CSS in the h1 tag which is a child of .div_outer.we can also target grandchild like this:
.div_outer .div_inner h3{
color: red;
}[2] Direct child selector
Direct child selector is used to targeting only child .not grandchild.
Example:
.div_outer > p{
color: red;
}In the above example, all child p tag of parent .div_outer will be applied CSS.
[3] Adjacent selector
We can also call the adjacent selector a "next sibling " selector. because it targets only on next sibling of the element.
Symbol: +
Example:
<div>
<p>Lore lor maxime nam dignissimoest veri</p>
<h2>hello world1</h2>
<h2>hello world2</h2>
<h2>hello world3</h2>
</div>
p+h2{
color: yellow;
}In this example, only hello world1 will get yellow color because this selector only targets the next sibling. so here next h2 is hello world1.
NOTE: This selector is only applicable to siblings.
[4] General sibling selector
A general sibling selector is the same as an adjacent selector but the only difference is this selector targets all next siblings.
Symbol: ~
Example:
<div>
<p>Lore lor maxime nam dignissimoest veri</p>
<h2>hello world1</h2>
<h2>hello world2</h2>
<h2>hello world3</h2>
</div>p~h2{
color: yellow;
}So now in this case all h2 after p tag will apply CSS.
UNIVERSAL SELECTOR
Example :
*{
padding: 10px;
}GROUP SELECTOR
To group CSS selectors in a style sheet, use commas to separate multiple grouped selectors in the style. We can use a group selector to apply CSS on multiple items.
Symbol: ,
Example :
p,h2{
color: yellow;
}Leave a comment if you had any queries regarding this post and I will reply as soon as possible. Anyway, if you enjoy reading my content, you can subscribe to my blog to receive all the latest updates. Happy Learning!
Share this article with your friends✌!!
0 Comments