CODEWITHSUNDEEP
javascripthtmlcsscss-selectors
jamesahorne
jamesahorne

Reputation: 37

How to select the first element on a page using a particular class when each subsequent element using the same class is also a first child?

I'm making a Fibonacci spiral. Code below. I need to create a second layer of the spiral (a spiral is made with a series of nested divs) and am creating multiple layers using the for loop. I need to change the height of the first div element in the file with class .item-one, no subsequent divs with class .item-one.

How do I select just the first one, bearing in mind there will be a further 4 div elements with class .item-one which are also all the first child of their parents, using just CSS and vanilla JS? (I need to change the height of just the first one and need all the rest of the .item-one divs to be a different height.)

I've tried :first-child and :first-of-type but all .item-one elements are the first children of their respective parents, so both :first-child and :first-of-type select all of the .item-one elements, not just the first on the page. This post select first element of the same class is close, except the solution selects all first child elements, whereas I only want to select the first div in the file with that class.

Code:

HTML

<div class="item-one">
  <div class="item-two">
    <div class="item-three">
      <div class="item-four"></div>
    </div>
  </div>
</div>

JS

window.addEventListener('load', function() {

  var $items = document.getElementsByTagName("div");
  var $item = $items[0];
  var $cloned_item = $item.cloneNode(true);
  var $final_item = $items[$items.length - 1];

  for (var i = 1; i <= 5; i++) {
    $final_item.appendChild($cloned_item);
    $final_item = $items[$items.length - 1];
    $cloned_item = $item.cloneNode(true);
  }

});

The end result looks something like this.

<div class="item-one">
  <div class="item-two">
    <div class="item-three">
      <div class="item-four">
        <div class="item-one">
          <div class="item-two">
            <div class="item-three">
              <div class="item-four">
                <div class="item-one">
                  <div class="item-two">
                    <div class="item-three">
                      <div class="item-four">...and so on...</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 1196

Answers (3)

JohnL
JohnL

Reputation: 115

You can use the > selector to apply the styling to the immediate first child of its parent with the .item-one class. If you don't have a parent for all of those elements, then using the body should do.

body>.item-one {
    /* Styling here */
    padding: 5px;
    margin: 5px;
    border: 5px black solid;
}

Upvotes: 0

A. Meshu
A. Meshu

Reputation: 4148

Does that what you are looking for?

div {border: 1px solid blue;}
.item-one {border: 1px solid yellow;}
body > .item-one {border: 2px solid red;}
<div class="item-one">
  <div class="item-two">
    <div class="item-three">
      <div class="item-four">
        <div class="item-one">
          <div class="item-two">
            <div class="item-three">
              <div class="item-four">
                <div class="item-one">
                  <div class="item-two">
                    <div class="item-three">
                      <div class="item-four">...and so on...</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Edit after @LGSon open eyes comments.

Upvotes: 0

abney317
abney317

Reputation: 8492

You'd have to use the parent to be able to single out the first child element. I used body in this case, but if you have a different parent then you'd use that.

body > .item-one {
  border: 1px solid red;
}
<div class="item-one">
  <div class="item-two">
    <div class="item-three">
      <div class="item-four">
        <div class="item-one">
          <div class="item-two">
            <div class="item-three">
              <div class="item-four">
                <div class="item-one">
                  <div class="item-two">
                    <div class="item-three">
                      <div class="item-four">...and so on...</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Or better would be to just give that outer div another class and use that if that's an option.

Upvotes: 2

Related Questions