CSS - Selectors
CSS - Selectors
CSS Selectors are used to select the HTML elements you want to style on a web page. They allow you to target specific elements or groups of elements to apply styles like colors, fonts, margins, and more.
The element or elements that are selected by the selector are referred to as subject of the selector .
CSS Universal Selector
CSS universal selector is a special selector that selects all the elements in an HTML document. It is denoted by an asterisk mark (*).
Syntax
The syntax for the universal selector is as follows:
* {
margin: 0;
padding: 0;
}As per the above syntax, the universal selector is used to apply a margin and padding of 0 to all HTML elements.
Example
The following example demonstrates the use of a universal selector (*) to set the font size, background, and text color of the document:
CSS Element Selector
CSS element selector selects and styles specific HTML elements . The element selector is defined by simply using the element’s name in the stylesheet.
Syntax
The syntax for the element selector is as follows:
p {
color: green;
}
h1 {
text-decoration-line: underline;
}Example
The following example demonstrates the use of a type selector to style the heading, paragraph and div element:
CSS Class Selector
CSS class selector selects an element with a specific class attribute. The class selector is defined using a period (.) followed by the class name.
Syntax
The syntax for the class selector is as follows:
.style-h1 {
text-decoration-line: underline;
}
.style-p {
color: green;
font-size: 25px;
}Example
The following example demonstrates the use of a class selector, where .style-p, .style-h1 and .style-div are class selectors:
CSS ID Selector
CSS ID selector selects an element with a specific value for its id attribute. It is denoted by the ”#” (hash) symbol.
Syntax
The syntax for the ID selector is as follows:
#style-p {
color: green;
font-size: 25px;
}
#style-h1 {
text-decoration-line: underline;
color: red;
}Example
The following example demonstrates the use of an id selector, where #style-p, #style-h1 and #style-div are the id selectors applied on the elements:
CSS Attribute Selector
CSS attribute selector selects an element based on a specific attribute or attribute values on an element.
Syntax
The syntax for the attribute selector is as follows:
a[target] {
background-color: peachpuff;
}You can also specify the element with an attribute having a specific value.
a[href="https://www.codescompiler.com"] {
background-color: peachpuff;
}Example
The following example demonstrates the use of an attribute selector. Here we have changed the style of elements with target attribute:
CSS Group Selector
CSS group selector allow us to apply same style to multiple elements at a time. Name of elements are comma-separated. The group selector keep CSS concise and avoid redundancy.
Syntax
The syntax for the group selector is as follows:
/* Apply same background color for h1 and h2 */
h1, h2 {
background-color: grey;
}Example
The following example shows how to use group selectors in CSS. We have set the background color for the headings and other HTML elements with reduced code.
CSS Pseudo-class Selector
CSS pseudo-class selector styles a specific state of an element, such as :hover is used to style an element when hovered.
Syntax
The syntax for the pseudo-class selector is as follows:
a :hover {
background-color: peachpuff;
color: green;
font-size: 2em;
}Example
The following example demonstrates the use of a pseudo-class selector. The font size, text and background color of the link changes on hovering over it.
CSS Pseudo-element Selector
CSS pseudo-element selector is used to style a specific part of an element rather than the element itself.
Syntax
The syntax for the pseudo-element selector is as follows:
a::before {
content: url();
}Example
The following example demonstrates the use of a pseudo-element selector ( ::before ) and ( ::after ):
CSS Descendant Selector
CSS descendant selector styles all the tags which are child of a particular specified tag. To mention as descendant, a single space between parent and child element is used.
Syntax
The syntax for the descendant selector is as follows:
div p {
color: blue;
}The above code set text color of paragraph tags that are inside div element to blue.
Example
The following example show how to use descendant selector in css. We have changed the text color of the paragraph element that is immediate child of the div element:
CSS Child Selector
CSS child selector selects all the direct child of a particular element. This is denoted by ’>’ (Greater than) symbol.
Syntax
The syntax for the child selector is as follows:
div > p {
color: blue;
}The above code set text color of paragraph tags that are directly inside div element to blue.
Example
The following example shows how to use child selector in css:
CSS Adjacent Sibling Selectors
CSS adjacent sibling selector selects an element that is immediately preceded by a specified element. A plus symbol ( ”+” ) is used to denote adjacent sibling.
Syntax
The syntax of adjacent sibling selector is as follows:
h1 + p {
margin-top: 0;
}The above code sets top margin of paragraph tag just after h1 tag to 0.
Example
The following example shows how to use adjacent sibling selector in css.
CSS General Sibling Selector
general sibling selector targets all the element that is preceded by a specified element. The general sibling selector is denoted by tilde symbol ( ”~” ) .
Syntax
The syntax of general sibling selector is as follows:
h1 ~ p {
color: gray;
}The above code sets text color of all the paragraph after h1 tag to gray.
Example
The following example shows how to use general sibling selector in css:
CSS Nested Selectors
CSS nesting allows to nest one style rule inside another rule, with the selector of the child rule relative to the selector of the parent rule.
Characteristics
The nesting selector shows the relationship between the parent and child rules.
-
When the nested selectors are parsed by the browser, it automatically adds a whitespace between the selectors, thus creating a new CSS selector rule.
-
In situations where the nested rule needs to be attached to the parent rule (without any whitespace), like while using the pseudo-class or compound selectors, the & nesting selector must be prepended immediately to achieve the desired result.
-
In order to reverse the context of rules, the & nesting selector can be appended.
-
There can be multiple instances of & nesting selector .
Syntax
The syntax for the nesting selector is as follows:
nav {
& ul {
list-style: none;
& li {
display: inline-block;
& a {
text-decoration: none;
color: blue;
&:hover {
color: red;
}
}
}
}
}Example
The following example demonstrates the use of a nesting selector (&):