CSS - Target 3rd div but skip Child Divs

Question

I am working with a WordPress plugin so I am unable to add a class on the PHP side seeing as this plugin receives and update every week and would override my changes. I need to try to do this on the front end.

Here is the code:

.mainInfo div:nth-of-type(3) {
  background-color: #302b44;
  border: 2px solid #FFF;
  padding: 14px;
}

<div class="mainInfo">
  <div>This is the 1st Div
    <div>Lorem ipsum.</div>
    <div>Quis, reiciendis.</div>
    <div>Repudiandae, inventore!</div>
  </div>
  <div>This is the 2nd Div
    <div>Lorem ipsum.</div>
    <div>Voluptates, minima.</div>
    <div>Minima, assumenda?</div>
  </div>
  <div>This is the 3rd Div **The only one I want to select**
    <div>Lorem ipsum.</div>
    <div>Dolores, ullam!</div>
    <div>Sequi, eligendi!</div>
  </div>
  <div>This is the 4th Div
    <div>Lorem ipsum.</div>
    <div>Recusandae, commodi.</div>
    <div>Reiciendis, nostrum.</div>
  </div>
</div>

Here is a fiddle showing what I am trying to accomplish, but what I'm sure you already know is this is also counting the child DIVs inside the main parent DIVs also. I only want to target the 3rd "main" DIV inside of "mainInfo" is there a way to accomplish this by skipping the child DIvs? If this can be solved by jQuery I will accept that also.

FYI: Like I said this a WP plugin so the first and second main DIV have varying amounts of child DIVs inside based on user inputs.

score 1 · Answer 1 · answered Apr 22 '19 at 15:59

1

Add the "direct child" connection between both selectors:

.mainInfo > div:nth-of-type(3) {

That way it does not match grandchildren of .mainInfo.

answered Apr 22 '19 at 15:59

arieljuod

15,460
2
25
36

Jorge Fuentes González · Accepted Answer · 2019-04-22T16:05:41.360

Just use the > selector (CSS selectors reference), which forces to select direct childs.

.mainInfo > div:nth-of-type(3) {

Selects all "div:nth-of-type(3)" elements where the parent is a ".mainInfo" element

.mainInfo > div:nth-of-type(3) {
  background-color: #302b44;
  border: 2px solid #FFF;
  padding: 14px;
}

<div class="mainInfo">
  <div>This is the 1st Div
    <div>Lorem ipsum.</div>
    <div>Quis, reiciendis.</div>
    <div>Repudiandae, inventore!</div>
  </div>
  <div>This is the 2nd Div
    <div>Lorem ipsum.</div>
    <div>Voluptates, minima.</div>
    <div>Minima, assumenda?</div>
  </div>
  <div>This is the 3rd Div **The only one I want to select**
    <div>Lorem ipsum.</div>
    <div>Dolores, ullam!</div>
    <div>Sequi, eligendi!</div>
  </div>
  <div>This is the 4th Div
    <div>Lorem ipsum.</div>
    <div>Recusandae, commodi.</div>
    <div>Reiciendis, nostrum.</div>
  </div>
</div>

CSS - Target 3rd div but skip Child Divs

2 Answers2