If you are advance and normal designer/developer you must need to know little more about CSS selectors In this article, we’ll learn about CSS Selectors ,will describe and discuss, with examples, how one can use CSS selectors how to use Selectors in our style (CSS) work

CSS selectors focus on HTML as gearing up with his IDs and classes as well

There are many type of selector to use in HTML, Will enjoy one by one

Class selectors

Selector can use to implement HTML attribute associate with full stop, dot is always come first since we start to create class attribute and number must not be used for started a class. ok here is syntax to match an element to specific class attribute

Let see If I want to use sky blue background for just a bulging a short line would use following rule:

.bulging { background-color: #87CEEB; }

Using bulgin class to "highlight" sky blue background continue will see other selectors as well.

Example:

---

Sibling selectors

Here is another examples to gearing up with selectors May you or may not to aware of sibling selector compatible with most of browser We can target element with In the css by describing what other elements around them.

You can see in below code relationship ul li and paragraph tag ( p )

Follow this syntex:

ul + p{
            font-weight: 900;
                  color: #3F527A;
        }

So what's going on here for any li that immediately follow p give it to font weight bold and change the color

Example:

---

Group selectors

There are condition where different tags may have similar style, In group selector you can group as many selector as you want and assign property to them we have syntax with example In place of selector we write comma separated Syntex

/*To reduce code redundancy we create group selector*/ 


h1,h3, p{ 
background-color: #D0D0D1; 
color: #4C4B4B;
border-right:solid 1px;}

Without group selector

h1{ background-color: #D0D0D1; color: #4C4B4B; border-right:solid 1px;}

h2{ background-color: #D0D0D1; color: #4C4B4B; border-right:solid 1px;}

p{ background-color: #D0D0D1; color: #4C4B4B; border-right:solid 1px;}

Example:

---