An HTML document has different parts. You can divide a simple HTML document into Header, Body, Sidebar, Footer, etc. Parts.
When we apply CSS Rule on a webpage, then different CSS rules are declared for each division. For this, each division is selected separately. And CSS Selectors are used to select the divisions.
In this post, we will tell you what is CSS Selector – Different Types of CSS Selector – Types of CSS Selector? They are going to give basic information about etc. To understand this concept easily, it is divided into small parts.
- Introduction to CSS Selectors
- Different Types of CSS Selectors
- The Type Selectors or Element Selectors
- Universal Selectors
- Class Selectors
- ID Selectors
- Attribute Selectors
- Descendant Selectors or Sub-selectors
- Child Selectors
- Writing Multiple Style Rule
- Grouping of Selectors
- What have you learned?
Introduction to CSS Selectors
CSS Selectors are very important. The content is selected by CSS Selectors, for which we want to write CSS Rules.
Selectors are a part of CSS Rule Syntax. Which can be an HTML Element, Element Attribute. You have already read about CSS Selectors in CSS Syntax Lesson. Let us now know about its types. You Can learn the best web development course
Different Types of CSS Selectors
Selectors are used according to the situation. For this, CSS provides different types of Selectors. From which WebMasters get Flexibility. Below you are being told about the Different Types of Selectors.
1. The Type or Element Selectors
This is a particular HTML element only. It is also called Type Selector. In this, you declare the CSS Rule by making the HTML Element a Selector. The word or syllable from which an HTML element is represented. The selector is also written with the same word or syllable. See the example below.
p {
color:orange;
,
With this style rule, the color of the paragraph element will be orange.
2. The Universal Selectors
Universal Selectors are used when you want to apply the same style rule to all the elements available in an HTML document. Universal Selector is represented by * (Asterisk). See the example below:
,
Color: orange;
,
With this style rule, the color of all the elements available in a document will be Orange.
Note:- If you have declared a separate CSS rule for any element, then Universal Selector will not have any effect on that particular element.
3. The Class Selectors
Class is a Global Attribute. You can use this for CSS Selector. Elements on which you want to apply a Style Rule. Classes are define by Class Attribute in all those elements. And the CSS Rule is write by putting the Full Stop Symbol (.) before this Class Name.
You can define a class for more than one element. You just have to define a separate class in each element with a name. Keep one thing in mind, you cannot start Class Name with Number. See the example below.
.classname {
color:orange;
,
To make the class a selector, a name has to be give first. Then use that name to declare the Style Rule. Like we have created a class from .classname above. And for this, the Style Rule has been declared. Now all the Elements will have Class .classname. This style will be apply to them. Take the best web design course
4. The ID Selectors
Like Class, ID is also a Global Attribute. It can also be make a CSS Selector. ID is the unique identity of an element. Which are defined separately for each element. The ID selector is write with # (Hash). You cannot start the name of the ID with any number. See the example below.
#idname {
color:orange;
,
The Style Rule that has been declar above. It will be apply to the element with the ID of Id-name.
5. The Attribute Selectors
By the way, Class and ID are also Attribute. But, they have to give names. And in the Attribute Selector, we select the Particular Attribute of an Element for the Selector. This method is mostly used for Form Element.
input [type=”text”] {
background:orange;
,
The above CSS rule will apply only to that type attribute whose value will be text. Apart from this, it will not apply to any other type of attribute.
Attribute Selector can be define in many ways. Which are being tell below.
- p[lang] – In this way, all Paragraph Elements with lang Attribute will be select.
- p[lang=”hi”] – Only those Paragraph Elements in which the lang attribute has the value hi will be select.
- p[lang~=” hi”] – Paragraph elements that contain the word hi in the value of the lang attribute will be select.
- p[lang│=” en”] – Paragraph elements in which the value of the lang attribute begins with “en” or “en” will only be select.
6. Descendant Selectors or Sub-selectors
You can also apply the CSS Rule defined within one element to any other element. This work is do by Descendant Selector. It is also call a sub-selector. For this, first, the Parent Selector is write, then within it, the Define Child Element is write by giving space. Then the CSS Rule is declar. See the example below.
li b {
color:orange;
,
By this Style Rule, this Style Rule will have an effect only on the b element coming within the li. Apart from this, it will not have any effect on other b elements.
7. Child Selectors
You can also think of this as a sub-selector. But, it has other functions. To apply CSS on a child selector, first, the parent selector is write. After this, the sign of < Greater Than is put by giving space. Then the child selector is write by giving space. And the CSS Rule is declare.
body > p {
color:orange;
,
The effect of this Style Rule will be on those Paragraph Elements which are Child Elements of Direct Body Elements. If a paragraph is inside any other element, then this style rule will not have any effect on that paragraph element. Also learn the best php course in Delhi
-
Writing Multiple Style Rule
When more than one CSS Rule Declare has to be do for a particular selector, then that situation is call Multiple Style Rule Declare. In this, you declare multiple style rules for any selector simultaneously. See the example below.
h1 {
color:orange;
font-weight: bold;
text-align: center;
text-decoration: underline;
,
You can separate multiple CSS declarations by semi-colons (;). You can declare any number of CSS rules here.
-
Grouping Selectors
If you want to apply the same CSS style to more than one element. So we will declare separate CSS rules for each element. But, through the grouping technique of CSS, we can declare a style for multiple elements. See the example below.
h1, a, b {
color:orange;
font-weight: bold;
text-align: center;
text-decoration: underline;
,
The above CSS will be applie equally to Heading, Anchor, and Bold Element respectively. To group the selectors, they are separate by comma (,). And the coma is not write after the last selector. You can do a grouping of any type of Selector in the same way.
Also, Check – How do Beginners Learn Digital Marketing Course
What have you learned?
In this post, we have given you complete information about CSS Selectors. Do you know what are CSS Selectors? How many types of CSS Selectors are there? Apart from this, you have also learned to declare Multiple Style Rule and grouping of Selectors. We hope that this post will prove useful for you.