CSS Selector - Part I
What is a selector?
We can apply different CSS to different elements by selecting them. CSS Selectors provides different ways to select elements for applying CSS.
CSS Selectors can be divide in 4 categories.
1. Simple selectors.
2. Attribute selectors.
3. Pseudo-classes and pseudo-elements.
4. Combinators.
In this article I'll discuss about Simple selectors only and remaining categories in next article.
Simple selectors
Universal Selector
Universal selector selects all the elements.
As shown in the example CSS applies to both h1 and P tag.
Type Selector
Type selector is also known as Element or Tag selector as its select HTML elements based on element or tag name.
As shown in the example all h1 elements will be red color and all p elements will be blue color.
Id selector
Id selector uses id attribute of an html element to select a specific element. Id selector start with # and followed by class name.
Note : Id of each element through the page must be same.
As shown in the example css will be applied base on Id of elements.
Class Selector
Class selector selects HTML element with a specific class attribute. Class selector start with . and followed by class name.
we can also specify that only selected element will be affected by class.
One HTML element can also refers multiple class.