Child selction under Parent classname

Hello there,

I have this HTML:

<div class="classname">
	<h4><a href="">Why you need to go to the faroe islands. Clues?</a></h4>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta nam culpa, officia! Ipsa at sed dicta nesciunt beatae aliquam fuga maiores laborum cum vero debitis corporis, amet quis ducimus, consequatur?</p>
	<p>By <a href="">Author Name</a></p>
</div>

I wanted to target the foirst paragraph tag under the classname class.

.classname:nth-child(2) {}
.classname p:first-child {}

I though both should work, and I tried both, but none delivered the result. Which will be the correct syntax?

Is this syntactically flawed and a wrong logic: classname p:first-child {}

You could use:-

.classname p:nth-child(2){}

or

.classname p:first-of-type {}
2 Likes

In your first example, the syntax is wrong. You need to change it to:

.classname p:nth-child(2) {}

In the second, there is no element matching your rule. .classname p:first-child {} targets the first child of .classname, if it is a <p> element. In this case, it’s an <h4> element, so the rule is not applied.

This would work:

.classname p:first-of-type {}

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

2 Likes

As an aside you can also target the p tag that follows the h4 tag if you do this:

.classname h4 + p{background:blue;}

Note that :nth-child selectors (and adjacent selectors) tightly couple the css to the html. If at some time the html is changed then the css no longer applies.

If instead you used a simple class on the element you want to target this decouples the html from the css.

In your html example you could style the first p tag like this:

.classname p:nth-child(2) {background:red}

<div class="classname">
	<h4><a href="">Why you need to go to the faroe islands. Clues?</a></h4>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta nam culpa, officia! Ipsa at sed dicta nesciunt beatae aliquam fuga maiores laborum cum vero debitis corporis, amet quis ducimus, consequatur?</p>
	<p>By <a href="">Author Name</a></p>
</div>

That’s fine but say you decide you want a logo or image at the top of that section?

e.g.

<div class="classname">
  <img src="img.jpg">
	<h4><a href="">Why you need to go to the faroe islands. Clues?</a></h4>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta nam culpa, officia! Ipsa at sed dicta nesciunt beatae aliquam fuga maiores laborum cum vero debitis corporis, amet quis ducimus, consequatur?</p>
	<p>By <a href="">Author Name</a></p>
</div>

The p tag is no longer red because now it is the third child.

Had you simply said <p class="highlight"> then your p tag would be red no matter what else you add or take away.

Although it’s tempting to do away with classes when you target elements by context using selectors like first-child, it does mean that you need to maintain tight control over your html.

There is also the issue of added specificity.

In your original rule you have something like this.

.classname p:nth-child(2) {background:red}

In my code it would be .classname{background:red}. That can be over-ridden by a simple class but yours cannot.

Using the simple single class means less specificity, less typing, less tightly coupled to the html and less to go wrong.:slight_smile:

There’s nothing wrong with selecting html by context but you do need to keep tight control on the structure in order for it to work consistently.

2 Likes

Yes, Thank you so much.

1 Like