What are selectors
A selectors in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.
Types of Selectors
There are various types of selectors in CSS. Some are:
- Universal Selector
- Type Selector
- Class Selector
- Id Selector
- Child Selector
- Descendant Selector
- Adjacent Sibling Selector
Let's read about in details:
Universal Selector
The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like <div>, <body>, <p> or any of the others tag.
A common use is in the universal reset, like this:
* {
margin: 0;
padding: 0;
}
Example:
Type Selector
A type selector selects all HTML elements that have a given node name. For example, “a” would select all <a> elements and apply the CSS property values to them. “Input” would select all <input> elements, “span” all <span> elements and so on.
You can also use a defined namespace to restrict the type selector to elements only within that namespace.
Syntax:
elementname{
/* CSS property */
}
Example:
Class Selector
The .class selector is used to select all elements which belong to a particular class attribute. In order to select the elements with a particular class, use the period (.) character specifying the class name ie., it will match the HTML element based on the contents of their class attribute. The class name is mostly used to set the CSS property to a given class.
Syntax:
.class {
/*CSS property*/
}
Example:
Id Selector
CSS id selectors select any element in an HTML page, if it has an attribute called id, whose value matches the name of the id selector.
In a stylesheet document, the name of the id selector is preceded by a "#". If an id selector is combined with another or more selectors, id selectors must be preceded with a #. IDs should be unique in an HTML page i.e., same Id can't be given to multiple elements on a single HTML page.
Syntax:
#id {
/* CSS property */
}
Example
Child Selector
CSS child selectors select an element which is a child of another element.
If, x, y and z are three HTML elements and z resides within start and end tag of y, and y resides within start and end tag of x; then y is called as a child of x; and z is called as a child of y.
<x>
<y>
<z></z>
</y>
</x>
While writing child selectors, selectors must be separated with ">" combinator.
syntax:
parent > child{
/* CSS property*/
}
Example:
Descendant Selector
The Descendant combinator is represented using a single space. It combines two selectors in which the first selector represents an ancestor (parent, parent's parent, etc.), and the second selector represents descendants. The elements matched by the second selector are selected if they have an ancestor element that matches the first selector. Descendant selectors use the descendant combinators.
Syntax
selector1 selector2 {
/* CSS property */
}
Example:
Adjacent Sibling Selector
Match an element that is immediately after another element, but not a child of it.
For example, if we wanted all paragraphs that immediately followed an h4 to have green text, but not other paragraphs, we would use the following CSS rule:
Syntax
selector1 + selector2 {
/* property declarations */
}
Example:
Top comments (0)