CSS selector for immediate child only IF that child has specific a class

Question

I want to get the selector for when an element is the immediate child AND has a specific class. What ever style I apply to that selector should not affect the second instance of div.this_one.

<main>
<div class="this_one"></div>
<div></div>
<div class="this_one"></div>
</main>

In the example above, I want the selector for that first instance of div.this_one

<main>
<div></div>
<div class="this_one"></div>
<div class="this_one"></div> 
</main>

In the example above here, none of the divs should be affected as the first div.this_one is not actually the immediate child.

I hope this makes sense.

No, this is not duplicate. You have not understood the question. In the post you link to, the "fist element" is NOT the immediate child - it is the second element from the parent. this question is relating to ONLY where it is the IMMEDIATE child AND has a certain class. — starchild, Mar 06 '19 at 10:36
In the duplicate question it has the answer to what you want to do in your question and the answer explains the `first-child` selector and what it does so yes this is a duplicate, it may not be exactly the same question but I think the answer and question have enough detail in it for you to understand how to answer your own question so no I won't reopen - you can vote to reopen and see if other people think the same — Pete, Mar 06 '19 at 10:46

score 2 · Answer 1 · answered Mar 06 '19 at 10:17

2

You can achive it with :first-child.this_one selector:

div{
  display:inline-block;
  width:100px;
  height:100px;
  margin:10px;
  background:grey;
}

main div:first-child.this_one{
  background:teal;
}

<main>
<div class="this_one"></div>
<div></div>
<div class="this_one"></div>
</main>

<main>
<div></div>
<div class="this_one"></div>
<div class="this_one"></div> 
</main>

answered Mar 06 '19 at 10:17

aMJay

2,215
6
22
34

I think you could make it even more perfect by using the `>` selector like this `main > div:first-child.this_one`. This prevents nested divs from being selected (because the questioner want to select the 'immediate child'). – Teuniz Mar 06 '19 at 10:25
sure, depends on html structure and the OPs expectations which one would have to guess from simplistic code in the post – aMJay Mar 06 '19 at 10:27

score 2 · Answer 2 · answered Mar 06 '19 at 10:22

.this_one:first-child {
  color: blue;
}

<div>
  <div class="this_one">This</div>
  <div>Not this</div>
  <div class="this_one">Or this</div>
</div>
<hr>
<div>
  <div>NOT</div>
  <div class="this_one">Or This</div>
  <div>NOT</div>
  <div class="this_one">Or this</div>
</div>

score 1 · Answer 3 · answered Mar 06 '19 at 10:19

Just select the class with first-child...

.this_one:first-child {
  color: red;
}

<div>
  <div class="this_one">This</div>
  <div>Not this</div>
  <div class="this_one">Or this</div>
</div>
<hr>
<div>
  <div>Not this</div>
  <div class="this_one">Or This</div>
  <div>Or this</div>
  <div class="this_one">Or this</div>
</div>

CSS selector for immediate child only IF that child has specific a class

3 Answers3