Welcome to everybody in this article I’ll share with you few very important CSS selectors, without CSS selectors you don’t get the desired outcome of the web page. That's why I’ll share with you, so many CSS selectors available but I’ll talk about a few of them, let’s get started.
1. Universal Selector
The CSS Selector is a universal selector which is used to select all elements of the HTML DOM. in some situations you want to apply a rule to all elements in an HTML Page then you can use this selector. Its starts with () asterisk.
CSS
Outcome
2. Individual selector
The individual selector is a way to select any element with a given tag name in a document, and apply the style to the element with the tag name. Remember you should only write the tag name, not write brackets around the tag name - p, not
.
CSS
Outcome
3. Class Selector and Id selector
Class selector is a way to select all elements with the specified class name. And apply style to each of the matching elements. The selector must start with a period (.) and the class name. The browser will look for all tags in the page that have a class attribute containing the class name. Remember class name must be the same - .box-links is different form. Box-Links. the class name can’t contain a space, but it can be hyphens or underscores.
CSS (class selector)
Outcome
CSS (Id selector)
Outcome
4. Chained selector
If you want to very specific element that you want select then this Chained selector comes. If you have a element with two or more class names then this chained selector works.
CSS
Outcome
5. Combined selector
This selector use to select multiple elements and apply the same rules like font colour, font family, font size etc.
CSS
Outcome
6. Inside and element
This selector is used for very specific selection, if you have multiple elements and you select any particular element then this element come.
CSS
Outcome
7. Direct child
This selector is used to match all the elements which are children of a specified element. It gives the relation between two elements. The element > element selector selects those elements which are the children of the specific parent.
CSS
Outcome
8. Sibling selector
This selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element.
CSS
Outcome
. sibling ~ p
The general sibling selector selects all elements that are the next siblings of a selected element. The following example selects all
elements that are next siblings of
CSS
Outcome
Pseudo Class
Pseudo class is used to define a special state of an element. It can be used to style the element when a user mouse over it. And style the first letter or first line, of an element etc. There was multiple pseudo-class available but today I talk about few important elements.
::before
The ::before selector used for add or insert something to be the content of each selected element.
CSS
Outcome
::after The ::after selector used for add or insert something to be the content of each selected element.
CSS
Outcome
:hover
The :hover selector is used to select elements when you mouse over them. The hover selector works on every element not only the link.
CSS
Outcome
:Focus
The :focus selector is used to selecting the element that has focus.
CSS
Outcome
First child
This selector is used to selecting the first child of the parent element.
CSS
Outcome
Last child
This selector is used to select last child of the parent element.
CSS
Outcome
