CSS Selectors

Using CSS selectors

Hope the previous article on Understanding html hierarchy  would have been useful to all. This article will help you to write CSS in a better way. CSS selectors are used to write styles more efficient and plays a major role in re usability and maintainability of the code.  Read further to know what are all the CSS selectors available for use.

Universal selectors

Universal selectors are given by asterisk symbol.  It will target all the elements in a web page. 

*{
   margin:0;
   padding:0;
}

Element type selectors

Element selectors are used to target HTML elements in a web page. For eg: nav element type selector will target nav elements and ul type selector will target all the ul elements in a web page.

ul{
list-style:none;
}
nav{
margin:20px 0;
}

CSS selectors by Id

Id selectors are denoted by hash tag. Selectors are allowed to target the element with the corresponding id value.  The id of an element should be unique and it cannot be reused anywhere in the document of the webpage. Also, id selectors will have high specificity than other selectors.

#address{
font-size:12px;
color:#dadada;
}

Selectors by class

Class selectors are denoted by dot notation. The class selector is widely used CSS selector. The difference between class and id selector is it can target multiple elements.

.product-item-desc{
 color: #0085c2;
 border:1px solid #c1c1c1;
}

Note
Whenever we wanted to style multiple elements we can use class selectors and when we want to target only one element we can use id selector. Unnecessarily using id should be avoided.

Descendant selector

Descendant selectors help in specific targeting of elements. Two or more selectors can also be combined.
When we want to target only the p tag which inside div with class box and not the other p tags

Child selector

As we are clear with descendants and child from our last post we can find it easy to understand the selector.
The style declaration will target not all the descendants of the parent and only the immediate child will be targeted.  Child selector will be denoted by > symbol.

General Sibling Selector

<div id="container">
<div id="box">
</div>
<div>
<div class="box">
</div>
</div>
</div>
CSS code
#container >.box{
  margin: 10px;
}

Siblings are elements next to each other in a HTML. Targeting the elements based on sibling relationships are denoted by tilde ~ symbol.

p ~ p {
color: red;
} 

Adjacent Sibling Selector

Adjacent sibling selectors will only select the first element.  The previous selector is more generalized and adjacent sibling selector is little strict.
For eg,

h1+ p {
 font-size:30px;
}

Here, the style will be applied to p tag that will follow immediately after h1.  Even if there are other p tags which follow the first p tag the styles won’t be applied because they are not followed by h1 tags they are followed only by a p tag. So the style won’t be applied.
There are so many other CSS selectors which will make us write CSS styles easier. We will discuss about that in the next post.

Subscribe to Creative Technocrayts and be a part of growing community.