Basic Selectors
In any documentation, it is of utmost importance to select the ID, classes, attributes, and elements. CSS Selectors help in selecting the HTML elements which you want to style. Let's have a look as to what are CSS Selectors:
Universal Selector
Universal selector, as the name suggests it selects all the elements in the HTML doc.
Example:
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
Type Selector
It selects all the elements with the given node name.
Example:
<label for="element"> It will match any label element in the HTML doc </label>
Class Selector
It selects the given class attribute in the elements.
Syntax: .classname
Example:
<h1 class="heading"> Here to select class we use heading which is a
class name. </h1>
ID Selector
It selects the given ID attribute in the elements.
Syntax: #id
Example:
<h1 id="heading"> Here to select class we use heading which is a
class name. </h1>
Attribute Selector
Selects all elements that have the given attribute.
Syntax: [attr] [attr=value], [attr*=value], [attr^=value], [attr$=value],etc
Example:
a[target="_blank"] {
background-color: #585858;
}
Grouping Selector
The elements are selected in groups or collectively.
Example:
div, span {font-size: 18px; text-align: left;}
which selects the elements <div> and <span> collectively.
Pseudo-classes and Pseudo-elements
The : pseudo allows the selection of elements related to state information that is not contained in the document tree.
Example:
a: visited will match all <a> elements that have been visited by the user.
The :: pseudo represents entities that are not included in HTML doc.
Example:
p::first-line will match the first line of all <p> elements.