CSS Structural Pseudo Classes Part 2 - CSS Tutorial 34

Notes for You:: CSS Structural Pseudo Classes Part 2 - CSS Tutorial 34
- They are used to target HTML elements and apply styles based on the relationship present between the html elements in the DOM tree structure. (I.e. root, first-child, last-child etc.)

Case 3.
selector : first-child
{
declaration list;
}
- It selects any html element targeted by the selector, if it is the first child of its parent html element.
Ex:
p: first-child
{
border:2px solid red;
}
- It selects any p element, if it is the first child of its parent html element.

Case 4.
selector : last-child
{
declaration list;
}
- It selects any html element targeted by the selector, if it is the last child of its parent html element.
Ex:
p: last-child
{
border:2px solid red;
}
- It selects any p element, if it is the last child of its parent html element.

Case 5.
selector : only-child
{
declaration list;
}
- It selects any html element targeted by the selector, if it is the only child of its parent html element.
Ex:
p: only-child
{
border:2px solid red;
}
- It selects any p element, if it is the only child of its parent html element.

=========================================

Follow the link for next video:
CSS Tutorial 35 - CSS Structural Pseudo Classes | CSS first-of-type, last-of-type, only-of-type

Follow the link for previous video:
CSS Tutorial 33 - CSS Structural Pseudo Classes | CSS root Selector | CSS empty Selector

=========================================

CSS Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

HTML Tutorials Playlist:-

JavaScript Tutorials Playlist:-

jQuery Tutorials Playlist:-

=========================================

► Subscribe to our YouTube channel:

► Visit our Website:

=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial

[ChidresTechTutorials]

SUBSCRIBE, SHARE & SUPPORT:
VISIT & LEARN AT FREE OF COST:

[aarepallideena]

I haven't seen the lecture as you told sir very understandable and easy to catch all points thankyou sir 👏

[rambabunakanamoni]

Thanks for this videos.In this videos i learned about first-child, last-child, only-child pseudo class selectors.

[ericlee]

This is a great tutorial, thanks so much for making it crystal clear!

[pretzshiva]

Excellent! Great teaching methodology!!

[hookbanner]

You're great teacher man! Thank you very match.

[prabu]

I want to select third and fourth links


.nav-bar >ul>li :last-child a
{


}

is it correct sir

[haneefashaik]

Sir, y should we have to take container.wt is the main purpose of it???

[sejalchorge]

what would be use of firstchild, lastchild, onlychild