Table of contents
- In CSS the most important thing you know that how to target any element for that you need to know many selectors. who select element for you for the styling
- there are many selector you never used and there are many which you used frequently
THERE ARE LOT OF CSS SELECTORS We talk about some of them
1) Universal Selector
- the Universal selector indicates with *
- it select the whole background of page
OUTPUT:-
2) Type Selector
- select the elements of that type
- the Type selector indicates with Element type
OUTPUT:-
Class and ID Selector
## 3)Class Selector
- the class selector indicates with . class name
OUTPUT:-
4)ID Selector
- the id selector indicates with #id name
OUTPUT:-
Combination
##
5)Descendant Selector
- Here You can select content with Element.class
OUTPUT:-
6) Or Selector
- Select elements or multiple elements l anchors and all div
- Element, Element
OUTPUT:-
7) And Selector
- Select elements that match all the selector combinations Selects all divs with the class blue
- all sameElement.sameClass
OUTPUT:-
8)Inside Selector
- element element
- element element.class
- element .class
9)Direct Child Selector
- Select elements that are direct children of the first element .
- Select anchors that are direct children of a div
- here you select content with parent element with first child element
Sibling Selectors
10)General Sibling
- Select elements that are siblings of the first element and come after the first element
- Selects all anchors that are siblings of a div and come after the div
- applies all the sibling after that selected element
- element.class~element
OUTPUT:-
11)Adjacent Sibling
- Select elements that are siblings of the first element and come directly after the first element
- Selects all anchors that are siblings of a div and come directly after the div
- applies the only sibling after that selected element
OUTPUT:-
Pseudo Class
12)Hover Selector
- Select elements that are hovered by the mouse .Select buttons that are being hovered
OUTPUT:-
13)focus Selector
- Select elements that are focused.
- Select buttons that are being focused
- Focus is set by either tabbing to an element or clicking an element such as a button or anchor tag
OUTPUT:-
14)Required Selector
- Select inputs that are required
- Select inputs with the required attribute
OUTPUT:-
- there are many selector we can checkout in next article