Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content


How To Use Structural Pseudo In CSS3?

When we need to change something in structure, we use structural pseudo class. Let’s see some types of it :

Root : The root pseudo class matches the root element of a document. This class will apply on whole page.

Empty : The empty pseudo class matches any element that has no children.

Last child : This will match the last child element of its parent element.

First child : It will target the first child element, regardless of type, in a parent element.

Nth child : This class will split first elements into groups of an elements and then select any child element that is the both child.

Suppose we have made a division. In that, we made more four divisions. So main div will be parent and rest four are child. In structural pseudo class, 1st and 4th child are consider as first and last child; in between child are consider as nth child.

Let’s see example of structural pseudo class :
In HTML, code as below:
<div class= “par”>
<p>this is first child</p>
<p>this is second child</p>
<p>this is third child</p>
<p>this is fourth child</p>
<p>this is fifth child</p>
After this, go to browser and see all five paragraphs are shown.
Now, let’s see CSS for this:
.par p: first-child{color: blue;}
.par p: last-child{color: green;}
.par p: nth-child(2) {color:black;}

In browser, you can see the colors are applied as you defined to child but what if there are hundreds or thousands child defined and you want to define the color. So for that, odd-even concept is used.

Let’s see how to that :
.par p: nth-child (even) {color: black;}

You will see, all even child’s color will changed to black. Add two more child sixth & seventh; and see the result in browser. Same way, as we did apply color on even child, you can add on to odd child.Now, suppose on a web page, there are four division. You want to color every 4th element of division.

So for that what you have to do :
.par p:nth-child (3n+1) {color:black;}

So this way, you can add structural pseudo class to elements.


Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere