What are CSS Selectors ?
CSS Selectors are the ones that select the HTML element you want to style. CSS Selectors select the HTML element based on its id, class or attribute.
🔹 There are many basic different types of selectors in CSS -
Basic Selectors
Grouping Selectors
Attribute Selectors
Combinators
Pseudo-classes
Pseudo-elements
Basic Selectors
Universal Selector
The Universal selector (*) in CSS is used to select all the elements in a html document. It also includes other elements which are inside under another element.
Syntax:
*ns|**|*
* {
margin: 0;
padding: 0;
outline: 0;
background-color: red;
}
Individual Selector
The element or individual selector selects HTML elements based on the element name (or tag) for example p, h1, div, span, etc…
Syntax:
elementname{ declaration; }
selector {
text-align: center;
color: blue;
}
Id Selector
The ID selector selects an element based on the value of its id attribute. Ids are used where one wants to uniquely identify an element in the file. Note : There should be only one element with a given ID in a single document.
Syntax:
#idname { declaration; }
#top-modal {
top: 0;
left: 50%;
padding: 25px;
background-color: aqua;
position: absolute;
}
Class Selector
The class selector selects HTML elements with a specific class attribute.
Syntax:
.classname { declaration; }
.text-danger {
color: red;
}
element.class Selector
The element.class Selector is used to selecting only the specified elements with the specified class attribute.
Syntax:
element.class{ declaration;}
selector.class{
property: value;
}
Grouping Selectors
Combined Selector
This selector is used to style all elements written together separated by comma(s) with the same style. Instead of writing rules separately for different selectors you can write them in groups as shown in the example.
Syntax:
selector1 , selector2 { declaration; }
selector1, selector2 {
property: value;
}
Attribute Selectors
[attribute] Selector
The [attribute] Selector is used to select all the HTML elements that are mentioned by the specific attribute.
Syntax:
[attr]
selector[attribute]{
property: value;
}
[attribute="value"] Selector
The [attribute="value"] Selector is used to select the HTML elements that are mentioned by the specified attribute with the exact value attribute.
Syntax: [attr=value]
[attribute="value"]{
property: value;
}
[attribute~="value"] Selector
The [attribute~="value"] Selector is used to select the HTML elements with attribute value containing a space-separated list of words, one of which is exactly the value.
Syntax:
[attr~=value]
[attribute~="value"]{
property: value;
}
[attribute|="value"] Selector
The [attribute|="value"] Selector is used to select the HTML elements with attribute value having a common word of value attribute followed by a hyphen (-).
Syntax:
[attr|=value]
[attribute|="value"]{
property: value;
}
[attribute^="value"] Selector
The [attribute^="value"] Selector is used to select the HTML elements with attribute value having a common word of the value attribute.
Syntax:
[attr^=value]
[attribute^="value"]{
property: value;
}
[attribute$="value"] Selector
The [attribute$="value"] Selector is used to select the HTML elements whose attribute value end with the mentioned word.
Syntax:
[attr$=value]
[attribute$="value"]{
property: value;
}
[attribute*="value"] Selector
The [attribute*="value"] Selector is used to select the HTML elements with attribute value having a mentioned word of the value attribute.
Syntax:
[attr$=value]
[attribute*="value"]{
property: value;
}
Combinators
Descendent Selector
The descendant selector is used to select all the HTML elements that are descendants of a specified element. It is represented by space( ).
Syntax:
selector1 , selector2 { declaration; }
selector1 selector2{
property: value;
}
Child Selector
The child selector is used to select the HTML elements that are the children of a specified element. It is represented by (>).
Syntax:
parent selector > child selector
selector1>selector2{
property: value;
}
Sibling Selector
The ‘~’ combinator selects siblings. This means that the second element follows the first, and both share the same parent.
Syntax:
A ~ B
A & B are siblings; properties of A will changed if applied.
selector1~selector2{
property: value;
}
The ‘+’ combinator matches the second element only if it immediately follows the first element, means css rule or property will be applied to the next element.
Syntax:
A + B
A & B are siblings; properties of B will changed if applied.
selector1+selector2{
property: value;
}
Pseudo Selectors
Pseudo Classes
t is used to style a special type of state of any element. For eg- It is used to style an element when a mouse cursor hovers over it.
like:- p:hover p::focus p:valid p:first-child,etc.
Note: We use a single colon (:) in the case of Pseudo-Class Selector.
Syntax:
Selector:Pseudo-Class { Property: value; }
a:hover
{
color: red;
}
Pseudo Elements
It is used to style any specific part of the element. For Eg- It is used to style the first letter or the first line of any element. The :: pseudo represent entities that are not included in HTML.
Note: We use a double colon (::) in the case of Pseudo-Element Selector.
like:- p::after p::before p::first-letter p::selection p::first-line,etc.
Syntax:
Selector::Pseudo-Element { Property: value; }
p::first-line
{
font-weight:bold;
color:aqua;
}
