Table of contents
What is CSS Selector?
CSS selectors are used to selecting the HTML elements you want to style. The selector contains one or more properties that define how the selected HTML element looks on the webpage.
Types of CSS Selectors
1. Universal Selector
Universal Selector is used to select all the elements in an HTML document for styling purposes.
Syntax:
/* Universal Selector Syntax */
* {
property : value;
}
Example:
2. ID Selector
ID Selector is used to select a specific element in HTML document for styling purposes.
Syntax:
/* ID Selector Syntax */
#idName {
property : value;
}
Example:
3. Individual Selector
Individual Selector is used to select all the similar types of elements in HTML document for styling purposes. Syntax:
/* Individual Selector Syntax */
elementName {
property : value;
}
Example:
4. Class Selector
Class Selector is used to select multiple elements in the document for styling purposes.
Syntax:
/* Class Selector Syntax */
.className {
property : value;
}
Example:
5. Combined Selector
A combined Selector is used to select multiple elements with the same property.
Syntax:
/* Combined Selector Syntax */
elementName,
#idName,
.className {
property : value;
}
Example:
6. Chained Selector
Chained Selector is used to select element with mutiple id,classes.
Syntax:
/* Chained Selector Syntax */
.className#idName {
property : value;
}
Example:
7. Combinator Selector
combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
1. Descendant Combinator
Descendent Combinator is used to select all element combining two selectors such that elements matched by the second selector are selected if they have an ancestor
Syntax:
/* Descendant Combinator Syntax */
FirstSelector SecondSelector{
property : value;
}
Example:
2. Child Combinator
Child Combinator is used to select elements that is direct child for their parent element
Syntax:
/* Child Combinator Syntax */
FirstSelector > SecondSelector {
property : value;
}
Example:
3. Adjacent Sibling Combinator
it helps to select the element of the second selector only if the second selector is adjacent to the first one.
Syntax:
/* Adjacent Sibling Combinator Syntax */
FirstSelector + SecondSelector {
property : value;
}
Example:
4. General Sibling Combinator
General Sibling Combinator helps to select the sibling of an element even if they are not adjacent, but the siblings must be below in the hierarchy.
Syntax:
/* General Sibling Combinator Syntax */
FirstSelector ~ SecondSelector {
property : value;
}
Example:
Pseudo Classes
A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states. For Example, changing the style of an element when the user hovers over it, or when a link is visited. All of these can be done using Pseudo Classes in CSS.
1. Before
Before selector can be used to insert content before the content of the selected element or elements. It is used by attaching ::before to the element it is to be used on.
Syntax:
/* Before Pseudo Class Syntax */
selector::before {
property : value;
}
Example:
2. After
After selector can be used to insert content after the content of the selected element or elements. It's used by attaching ::after to the element it is to be used on.
Syntax:
/* After Pseudo Class Syntax */
selector::after {
property : value;
}
Example: