What is the best and the correct way to target the first child(div here) of the class

HTML & CSS
1 
<footer class="footer2">    
 <div >                
 </div> 

 <div>                    
 </div>           
</footer>

what is the best and the correct way to target the first child(div here) of the class footer2

I want to give first div 66% and the second div 33% width.

2

Is there a reason why you don’t want to give each of them their own class, and then just target the class?

2 Likes
3

My bad. The idea is to avoid the infusion of any extra classes still achieve the end objective.

4

Hi,
You are real close to the answer in your thread title :slight_smile:

Among others, such as :nth-child, you can simply use div:first-child and div:last-child


.footer2 {
  display:flex;
}
.footer2 div:first-child {
  width:66%;
  background:lime;
}
.footer2 div:last-child {
  width:33%;
  background:orange;
}

<footer class="footer2">
  <div>first-child</div>
  <div>last-child</div>
</footer>
1 Like
5

Thanks sir. I think some of these kinds of options are also used:

.someclass > div

or

.someclass ~ div

or May be I am hallucinating.

780×275 2.05 KB

6

That is a child combinator selector.
It would target both divs in your footer without distinguishing one from the other.

Edit:
But it could be used in an obscure old school way along with the adjacent sibling selector

.footer2 {
  display:flex;
}
.footer2 > div {
  width:66%;
  background:lime;
}
.footer2 > div + div {
  width:33%;
  background:orange;
}

However, the pseudo class selectors would be more effiecent

.someclass ~ div

That is a general sibling combinator
It would not target the divs at all since they are children, not siblings of the footer

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.