Types of CSS Selectors & How They Work
Learn the Basic CSS Selectors
Hey guys…!!!
Although I’m still in the process of learning CSS. I just thought of sharing what I learned with you.
I’m going to show you Some basic CSS Selectors and the ways in which they work.
What are CSS Selectors
CSS selectors are used to define the elements to style with CSS / If you want to style tags or If you want to style only for some parts of tags of tags / If you want style only one part of tags, then you can use CSS selectors.
Imagine that a school teacher wants to ask a question from students. Then teacher can ask that question by naming one student or group of students. This example can explain this from ordinary life.
Selectors have actual names and categories. Let’s move into that part.
Types of CSS Selectors
In here I will consider only the basic and main types of CSS selectors.
(1) Element Selector
Element selector selects HTML elements based on the element name. We can style that named element part using CSS separately.
Syntax of Element Selector
element { Style Properties }
Here is a example for Element Selector
Here internal CSS way is used for ease of understanding
In this example, The style rules inside the h1 selector will be applied on every <h1> element in the HTML page. According to this Example characters in <h1> element should be red and they should align to the center. And also the rules inside the p selector will be applied on every <p> element in the Document.
Output
(2) ID Selector
The Id Selector is used to give a modification to a specific element. Here you can style one unique element from HTML page. As an example , Let’s think there are five paragraph tags in a HTML page. I want to style third paragraph. In here we can use ID selector.
Hashtag (#) character , followed by the Id of the element.
There are some rules when we using Id Selector,
· When we giving a name for the Id, it must contain at least one character and can not begin with a number.
· If we give a name to the id, it should be unique for the page. It means an Id name is only for one place per page.
Syntax of Element Selector
#Id name { Style Properties }
Here is a example for ID Selector
Output
(3) Class Selector
CSS selector is used to select the HTML elements you want to style. Period (.) character, followed by the class name.
Syntax of Element Selector
.Class name { Style Properties }
There are some qualities of Class Selector.
· We can put the same class in any element.
Example
Here we have added the same class to the h1 tag and to the 4th p tag.
Output
· We can include as many classes as you like in one class
Example
Output
(4) Grouping Selector
Here we can target more than one element by using grouping selectors. We can indicate just separate the selector names with a comma. Grouping Selectors makes very eassy to use CSS codes.
Syntax of Element Selector
element , element { Style Properties }
Example for Grouping Selector
Output
(5) Universal Selector
Universal Selector used to select all the elements on the HTML page. * symbol indicate universal selector in CSS. If you want to set a style for all elements of an HTML page, or for all of the elements within an element of an HTML page.
Syntax of Element Selector
*{ Style Properties }
Example for Universal Selector
Output
Assume that there are some h1 element, p element, table and a Unordered list in a HTML page. writing *{color: blue; font-size: 50px} is exactly the same as writing using as bellow.
Hope, this article would be helpful for you in using basic CSS Selectors. By my next article I will discuss further more about CSS. Hope you to have a good knowledge about CSS Selectors. Thank you!
Have a nice day…!!!
