nth-of-type to hide 2nd and 3rd occurrences of a class?

Question

I am trying to set only the 2nd and 3rd divs (not first) with a class of "promptrow" to display:none (so the items in red should be hidden). However, nth-of-type doesn't select them - can't figure out why since it seems pretty straightforward...

.promptrow:nth-of-type(2) {
  display:none;
  }

.promptrow:nth-of-type(3) {
  display:none;
  }


<fieldset style="margin-top: 0;">

<div class="fieldsetinside">

   <div id="crumbs">Crumbs</div>

   <div class="pgraph">
      <div>Culinary Trip</div>
      <div March 2016></div>
   </div>

   <div>Trip Details</div>

   <div style="clear: both;"></div>

   <div class="shoprow-qdat promptrow" style="color:blue;">
      <div class="quantity">Qty</div>
      <div class="description">Description</div>
      <div class="amount">Amount</div>
      <div class="total">Total</div>
   </div>

   <div class="shoplist">
       <div class="shoprow-qdat">
           <div class="quantity">1</div>
           <div class="description">Deposit 1</div>
           <div class="amount">100</div>
           <div class="total">---</div>
       </div>
   </div>

   <div class="shoplist">
       <div class="shoprow-qdat">
           <div class="quantity">2</div>
           <div class="description">Deposit 2</div>
           <div class="amount">$200</div>
           <div class="total">---</div>
       </div>
   </div>



   <div style="clear: both;"></div>

   <div class="shoprow-qdat promptrow" style="color:red;">
      <div class="quantity">Qty</div>
      <div class="description">Description</div>
      <div class="amount">Amount</div>
      <div class="total">Total</div>
   </div>

   <div class="shoplist">
       <div class="shoprow-qdat">
           <div class="quantity">3</div>
           <div class="description">Deposit 3</div>
           <div class="amount">$300</div>
           <div class="total">---</div>
       </div>
   </div>


   <div style="clear: both;"></div>

   <div class="shoprow-qdat promptrow" style="color:red;">
      <div class="quantity">Qty</div>
      <div class="description">Description</div>
      <div class="amount">Amount</div>
      <div class="total">Total</div>
   </div>

   <div class="shoplist">
       <div class="shoprow-qdat">
           <div class="quantity">4</div>
           <div class="description">Description 4</div>
           <div class="amount">$400</div>
           <div class="total">---</div>
       </div>
   </div>

   </div>
</fieldset>

Fiddle here: https://jsfiddle.net/badjuju/y88txs9b/

Again, nth-of-type applies to tags, not classes. See my answer. — , Aug 09 '16 at 22:17

score 2 · Accepted Answer · answered Aug 09 '16 at 22:03

nth-of-type matches tags, you should have something like this:

promptrow:nth-of-type(2) {
    display:none;
}

<promptrow class="shoprow-qdat" style="color:red;">
    <div class="quantity">Qty</div>
    <div class="description">Description</div>
    <div class="amount">Amount</div>
    <div class="total">Total</div>
</promptrow>

See this jsfiddle or this snippet:

promptrow:nth-of-type(2) {
  display:none;
  }
  
promptrow:nth-of-type(3) {
  display:none;
  }

<fieldset style="margin-top: 0;">

<div class="fieldsetinside">

   <div id="crumbs">Crumbs</div>
   
   <div class="pgraph">
      <div>Culinary Trip</div>
      <div March 2016></div>
   </div>

   <div>Trip Details</div>

<div style="clear: both;"></div>

<promptrow class="shoprow-qdat" style="color:blue;">
   <div class="quantity">Qty</div>
   <div class="description">Description</div>
   <div class="amount">Amount</div>
   <div class="total">Total</div>
</promptrow>

<div class="shoplist">
    <div class="shoprow-qdat">
        <div class="quantity">1</div>
        <div class="description">Deposit 1</div>
        <div class="amount">100</div>
        <div class="total">---</div>
    </div>
</div>

<div class="shoplist">
    <div class="shoprow-qdat">
        <div class="quantity">2</div>
        <div class="description">Deposit 2</div>
        <div class="amount">$200</div>
        <div class="total">---</div>
    </div>
</div>



<div style="clear: both;"></div>

<promptrow class="shoprow-qdat" style="color:red;">
   <div class="quantity">Qty</div>
   <div class="description">Description</div>
   <div class="amount">Amount</div>
   <div class="total">Total</div>
</promptrow>

<div class="shoplist">
    <div class="shoprow-qdat">
        <div class="quantity">3</div>
        <div class="description">Deposit 3</div>
        <div class="amount">$300</div>
        <div class="total">---</div>
    </div>
</div>


<div style="clear: both;"></div>

<promptrow class="shoprow-qdat" style="color:red;">
   <div class="quantity">Qty</div>
   <div class="description">Description</div>
   <div class="amount">Amount</div>
   <div class="total">Total</div>
</promptrow>

<div class="shoplist">
    <div class="shoprow-qdat">
        <div class="quantity">4</div>
        <div class="description">Description 4</div>
        <div class="amount">$400</div>
        <div class="total">---</div>
    </div>
</div>

</div>
</fieldset>

No, you can use classes. I was referencing this example and they are using classes to select the first and second divs with the class of ".user-show-tab-title applied" -- http://stackoverflow.com/questions/30460976/why-doesnt-nth-of-type-work — bad_juju, Aug 09 '16 at 22:21
@bad_juju Please see this [reference](http://www.w3schools.com/cssref/sel_nth-of-type.asp). In the post you mention, the accepted answer selects by div tag. Once the selection is made, they select all element of class user-show-tab-title inside the first resulting set (e.g. the result of .history div:nth-of-type(1)). — , Aug 09 '16 at 22:32

Geding · Answer 2 · 2016-08-09T22:26:04.617

1

The :nth-of-type(n) selector matches every element`that is the nth child, of a particular type, of its parent.

n can be a number, a keyword, or a formula.

It's mean your div's with class promptrow must have only one common parent if there is other same html elements (div)

Check this example:

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(odd) {
    background: red;
}

p:nth-of-type(even) {
    background: blue;
}
</style>
</head>
<body>
<div>
  <p>red</p>
  <p>blue.</p>
</div>

<p>red.</p>

<div>
  <p>red.</p>
</div>
</body>
</html>

edited Aug 09 '16 at 22:26

answered Aug 09 '16 at 22:07

Geding

324
2
11

I thought they did all have the same parent? Maybe I have that wrong - what would be the parent for those divs then? – bad_juju Aug 09 '16 at 22:13
@sjdalessandro have right about that it's use element, element here is div so when parent has more div's (here `
`) they will not work
– Geding Aug 09 '16 at 22:23

nth-of-type to hide 2nd and 3rd occurrences of a class?

2 Answers2