CSS Selectors
CSS Selectors are used for selecting different types of elements or content from an HTML to add style to a webpage. There are different types of selectors, which are used in various methods.
1) Universal Selector:
When developers want to add styles to an entire webpage, at that time Universal Selectors are used. It can be defined by using '*'. The syntax is given below.
Syntax:
*{
property:value;
}
As shown in the above example, 1% padding is applied to the entire webpage.
2) Individual Selector:
An individual selector is used to add style to a particular element of an HTML file.
ex.<p>, <h1>, <h2> etc.
Syntax:
tag name{
property:value
}
The above example makes the font blue because, in the CSS file, we select the paragraph tag. In the same way, we can add style to any element of HTML.
3)Class and Id Selector:
Class Selector:
When developers want to target more than one element, at that time Class selector is used. A selector class can be defined by '.'(dot).
Syntax:
.classname{
property:value;
}
Here, In the HTML file, the class is defined as bg-pink two times. In a CSS file, using the same class name style can be added to more than one element. As shown in the above example, the class is used twice with paragraph tags.
Id Selectors:
When developers want to target a single element of a web page, at that time Id selector is used. A selector id can be defined by '#'.
Syntax:
#id-name{
property:value;
}
As shown in the above example id is defined in the HTML file. By using the Id selector we can add style to it. For the best practice, it is necessary to use Id once in a file.
4)And selector:
When there is a requirement of adding common styles in more than one class or Id, at that time and selector is used.
Syntax:
.class-one.class-two{
property:value;
}
As shown in the above example, two classes are defined in one element. These two classes' styles can be added in CSS by 'And Selector'. as, class1.class2.
For using it, in element, it is written as, class1 class2. Separated by space.
As defined in the example, bg-black and text-white classes are defined together and also used combined in one element.
5)Combined Selector:
When there is a need to add a common style in more than one element, at that time combined selector is used.
Syntax:
tag-name,tag-name,tag-name{
property:value;
}
As shown in the example, Style is applied to span and paragraph tag, separated by coma. This way, a common style in a different element can be added using combined selectors.
6)Inside an element:
When there is a need to apply a style to the child element, at that time it is used. Style can be applied to the grandchild element also by using an inside element.
Syntax:
grandparent-tag parent-tag child-tag{
property:value
}
As shown in the example, li is a child element of ul and ul is a child element of div. To apply the style in li, CSS can be applied as above. Eg. Grandparent_Element Parent_Element Child_Element as div ul li. This style is applicable where the li element is the grandchild of the div element.
7)Direct child Selector:
When there is a need to add style to any child element, at that time this is used.
Syntax:
parent-tag>child-tag{
property:value;
}
As shown in the above example, li and ul are the direct children of the div element. So, for adding style to the li tag, a direct child selector is used. Style is added to the li element, which is targeted here.
8)Sibling selector ~ or +:
adjacent sibling combinator (+):
When there is a need to add style to the element which is directly followed element after specific element. It is used when there is a common parent element. An adjacent sibling can be defined in two ways.
Syntax:
.class-name+targeted-tag-name{
property:value;
}
tag-name+targeted-tag-name{
property:value;
}
As shown in the above example,test1 is defined by a sibling class, after test1, the immediate element is test2. The style which is added to the page is the next element of a specific element.
general sibling combinator(~):
When there is a need to add style to each element after a specific element, at that time it is used. An adjacent sibling can be defined in two ways.
Syntax:
.class-name~targeted-tag-name{
property:value;
}
tag-name~targeted-tag-name{
property:value;
}
As shown in the above example, after sibling there is three <li> tag. So, style applies styles to test3, test4 and test5.