Pseudo Class Selector

11)Adjacent Sibling Class Selector

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

12)Hover Class Selector

Select elements that are hovered by the mouse .Select buttons that are being hovered

13)focus Class 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

14)Required Class Selector

Select inputs that are required
Select inputs with the required attribute

15)Checked Class Selector

Select checkboxes/radio buttons that are checked
Select inputs that are checked

ALL ABOUT PSEUDO ELEMENT/CLASS/CLASS POSITION SELECTOR

1.what they are how they work 2.the misunderstood content property 3.using them as design elements

:: →→ pseudo element Selector

: →→ pseudo class Selector

Pseudo Element Selector

1.what they are how they work

16)Before Selector

Creates an empty/content element directly before the children of selected element
div::before

17)After Selector

Creates an empty/content element directly after the children of selected element
div::after Empty pseudo Element Selector

content pseudo Element Selector

img source is content .pseudo element can not work in images. yes on img tag pseudo element not working I learn that in very hard way

2.the misunderstood content property(What is Purpose of pseudo Element)

pseudo element in browser cant be selected if you try then do it. yes you cant selected its manually. just try it out
in this content hello cant be selected by mouse dragging

yes, its true that pseudo element cant be work on img, but img can be used as content of pseudo element

1 pseudo element as image

pseudo element ::before and ::after content cant be selected its pseudo element selector they just hang out there
you can use image as content as ::before and ::after also you can use icon .3d elements use in that way

2 its use for the give open quote-close quote to any styling and close quote too

3) & 4) for the tool tip

margin-top: just output is visible for the screen
white-space: nowrap; means take space it needs to be
transform: scale(0); means hide or disappear display size
a[data-tool-tip]:hover::after{ } means hover must be in Centre otherwise wont work

5)for the title decoration and use font awesome as pseudo selector

6)for the link decoration use pseudo element

Pseudo Class Position Selector

18)First Child Selector

Select elements that are the first child inside a container
Select anchors that are the first child
a:first-child

19)Last Child Selector

Select elements that are the last child inside a container
Select anchors that are the last child
a:last-child

20)Nth Child Selector

a:nth-child(2n)
Select elements that are the nth child inside a container based on the formula
Select anchors that are even numbered children

21)Nth Last Child Selector

a:nth-last-child(3)
Select elements that are the nth child inside a container based on the formula counting from the end
Select anchors that are the third to last child

22)Only Child Selector

a:only-child
Select elements that are the only child inside a container
Select anchors that are the only child

23)First Of Type Selector

a:first-of-type
Select elements that are the first of a type inside a container
Select the first anchor in a container

24)Last Of Type Selector

a:last-of-type
Select elements that are the last of a type inside a container
Select the last anchor in a container

25)Nth Of Type Selector

a:nth-of-type(2n)
Select elements that are the nth of a type inside a container based on the formula
Select every second anchor

26)Nth Last Of Type Selector

a:nth-last-of-type(2)
Select elements that are the nth of a type inside a container based on the formula counting from the end
Select the second to last anchor

27)Only Of Type Selector

a:only-of-type
Select elements that are the only of a type inside a container
Select anchors that are the only anchor in a container

28)Not Selector

a:not(.c)
Select all elements that do not match the selector inside the not selector
Select all anchor tags that do not have the c class

All About Pseudo Selector And Why We Use

Table of contents