Being a .NET developer I worked most of time on server side code and could not pay required attention on the UI as there was always somebody there for that. But in recent times, we have seen awesome things happening in this front with the new technologies like HTML 5, CSS3, bootstrap etc forced me to start learning that. I have started from learning CSS and sharing today CSS selectors with examples. So let’s start from basics.

What is CSS?

CSS i. e. Cascading Style Sheet is a styling language for HTML documents. It tells an HTML document (which contains set of HTML elements) that how does the elements of HTML will be displayed mostly on browsers but also used for Paper and other media.

How to apply CSS on an element.

The simplest way to apply CSS to an HTML element is via style attribute of the element but that is not recommended approach. Recommended approach is via style sheet where we put the list of css rules. But on which html element or set of elements these css will be applied, is determined via CSS selectors. Browser has a its own selector API which traverses the DOM (document object model) and pick the elements which matches to the selectors. In this post, I have created examples at Plunker for examples so that we can see it running.

Why CSS selectors are important?

CSS selectors are very important not just because of finding an element where css applies but also these are used JavaScript libraries like AngularJS, jQuery to pick the elements from DOM to attach the behavior or data to these elements. These libraries are heavily used now a days. So using the correct selector helps in performance and writing in better code.

There are three type of selectors.

1. Element
2. Class
3. Id

Element Selector

Element selector applies to all the instances of that element in the HTML document. Element selector looks like

Here p ( i eParagraph) is element name and where I defined the color as blue. So in the document, wherever a paragraph element occur it will make the font color blue, other elements would be unaffacted. In the example, there are two p element in the page and both are blue now. See it plunker

https://plnkr.co/edit/Wa4mn5zRATyeGIqJZSsY?p=preview

Class Selector

Every HTML element provides an attribute where we can provide the css class name. To define CSS class name, it should start with . (dot) and there is no space between dot and class name. Lets see an example

Here blueText is the css class name and the style I left as is. Now unlike the element selector where css gets applied to the corresponding elements as soon as we include it in the document, here we need to make some changes in HTML elements. We need to add the provide it the class name attribute. Here we have the advantage that we can apply to different type of elements as

In the example, I have created the css class as able and added the attribute to one paragraph(p) and one div element.

https://plnkr.co/edit/cSex0diaFAsXSqpKmzxQ?p=preview

Id Selector

Id selector can be applied to only one element in the html document as HTML specification suggests to have unique id for each element. There is an attribute with name Id is available to each element where we can define it. To define the css, it should start with hash (#) sign as

Here also there should no space between # and name of the Id. Any element with the Id name as firstPara found by browser, this css will be applied. Here also we do not need to make any specific changes to apply the css as while defining the css style, we can simply provide css for the specific Id. As this style can be applied max one element in the document so it is less used.

In this example, I have a paragraph with Id as firstPara and for this provided CSS as above.

https://plnkr.co/edit/mUV6YyW5WkraWM6iDsIL?p=preview

So we have discussed primary selectors. CSS allows many more options for writing efficient rules like Group selecters. Let’s discuss

Group Selectors

Grouping selectors means more than one selectors for the same style like

Above rule tells that this rule will be applied to those elements which either have class as blueText or with Id as firstPara,. Here we put , (comma) as separator for selectors. There is no limit on the number same or different selector. In the example. I have used firstPara to first p element and blueText to next div element. Lets see that

https://plnkr.co/edit/mUV6YyW5WkraWM6iDsIL?p=preview

Conclusion

In this post, we have discussed the primary CSS selectors : element, class and id and saw the running examples. We have also seen the that how can we group them in to one and use different selector in code. There are more powerful feature to these selectors, we will cover in next post.

Cheers,
Brij