如何定位 css 中的子元素

Question

Hello everyone in my case I want to target the 3 element for example, and I have the tags different, the 3 element can be p or div or something else, so I want to just target the 3 element what ever it is, i want to select always the 3 element.

Can I do that with CSS, if any help?

For example:

<div>
  <p></p>
  <span><span>
  <div></div> //3 element here is div
  <a></a>
</div>

Or:

<div>
  <div></div>
  <span><span>
  <p></p> //3 element here is p
  <a></a>
</div>

Answer 1

1. If you would always have 4 tags, and want to target first 3,

 div > *:not(:last-child){ background-color: red; }

 <div> <p>AAAAAAAAAAAAAAA</p> <span>AAAAAAAAAAAAAAA</span> <div>AAAAAAAAAAAAAAA</div> <a>AAAAAAAAAAAAAAA</a> </div>

2. You could also target first 3 elements like below,

 div > *:nth-child(-n+3){ background-color: red; }

 <div> <p>AAAAAAAAAAAAAAA</p> <span>AAAAAAAAAAAAAAA</span> <div>AAAAAAAAAAAAAAA</div> <a>AAAAAAAAAAAAAAA</a> </div>

Answer 2

if you only want to select first three child of a parent div(or any other element), you can do something like this,

.parent:nth-child(1),
.parent:nth-child(2),
.parent:nth-child(3){
   //Your styles
}

Above code would select 1st, 2nd and 3rd child of the parent div to which i gave a class of parent. Also, if you want to select all the child of that parent div you could simply do as,

.parent > *{
  //Your styles
}

this code would select all the child of the.parent div