Ignore the initial children of the highest level divs exclusively

Question

Ignore the initial children of the highest level divs exclusively

Is there a way to apply a style to all top-level divs within a div, excluding the first one? I have tried using not(:first-child) but it seems to be recursive. How can this be achieved?

<div class='want-to-skip-first-a'>
    <div class='a'>
        <div>1</div>
        <div>2</div>
    </div>
    <div class='a'>
        <div>3</div>
        <div>4</div>
    </div>
    <div class='a'>
        <div>5</div>
        <div>6</div>
    </div>
</div>

.want-to-skip-first-a div:not(:first-child) {
    border-top: solid red 11px;
}

Jfiddle: http://jsfiddle.net/GrAaA/85/

Thank you!

html css

Answer 1

Answer №1

When targeting div elements with the "a" class, excluding the first one for styling purposes, a slight adjustment in your CSS will do.

.omit-first-a .a:not(:first-child) {
  background-color: red;
}

Answer 2

When targeting div elements with the "a" class, excluding the first one for styling purposes, a slight adjustment in your CSS will do.

.omit-first-a .a:not(:first-child) {
  background-color: red;
}

Answer 3

Answer №2

If you follow j08691's suggestion, you can simply utilize the direct child selector (>) like this:

.want-to-skip-first-a>div:not(:first-child) {
  border-top: solid red 11px;
}

<div class='want-to-skip-first-a'>
  <div class='a'>
    <div>1</div>
    <div>2</div>
  </div>
  <div class='a'>
    <div>3</div>
    <div>4</div>
  </div>
  <div class='a'>
    <div>5</div>
    <div>6</div>
  </div>
</div>

Alternatively, you can use the "sibling" selector (+):

.want-to-skip-first-a .a + .a{
  border-top:11px solid red;
  }

<div class='want-to-skip-first-a'>
    <div class='a'>
        <div>1</div>
        <div>2</div>
    </div>
    <div class='a'>
        <div>3</div>
        <div>4</div>
    </div>
    <div class='a'>
        <div>5</div>
        <div>6</div>
    </div>
</div>

It might also be useful to specify the class name on the div element for your CSS to work correctly:

.want-to-skip-first-a div.a:not(:first-child) {
  border-top: solid red 11px;
}

<div class='want-to-skip-first-a'>
  <div class='a'>
    <div>1</div>
    <div>2</div>
  </div>
  <div class='a'>
    <div>3</div>
    <div>4</div>
  </div>
  <div class='a'>
    <div>5</div>
    <div>6</div>
  </div>
</div>

Feel free to choose any of these methods to achieve your desired outcome.

Answer 4

If you follow j08691's suggestion, you can simply utilize the direct child selector (>) like this:

.want-to-skip-first-a>div:not(:first-child) {
  border-top: solid red 11px;
}

<div class='want-to-skip-first-a'>
  <div class='a'>
    <div>1</div>
    <div>2</div>
  </div>
  <div class='a'>
    <div>3</div>
    <div>4</div>
  </div>
  <div class='a'>
    <div>5</div>
    <div>6</div>
  </div>
</div>

Alternatively, you can use the "sibling" selector (+):

.want-to-skip-first-a .a + .a{
  border-top:11px solid red;
  }

<div class='want-to-skip-first-a'>
    <div class='a'>
        <div>1</div>
        <div>2</div>
    </div>
    <div class='a'>
        <div>3</div>
        <div>4</div>
    </div>
    <div class='a'>
        <div>5</div>
        <div>6</div>
    </div>
</div>

It might also be useful to specify the class name on the div element for your CSS to work correctly:

.want-to-skip-first-a div.a:not(:first-child) {
  border-top: solid red 11px;
}

<div class='want-to-skip-first-a'>
  <div class='a'>
    <div>1</div>
    <div>2</div>
  </div>
  <div class='a'>
    <div>3</div>
    <div>4</div>
  </div>
  <div class='a'>
    <div>5</div>
    <div>6</div>
  </div>
</div>

Feel free to choose any of these methods to achieve your desired outcome.

Answer 5

Answer №3

Don't overcomplicate things, it's simple. All you have to do is assign a class to the div elements where you want specific CSS properties. In this scenario, there are 6 elements and you just need to add the class to all except the first one.

<div>
   <div >1</div>
   <div class='want-to-skip-first-a'>2</div>
   <div class='want-to-skip-first-a'>3</div>
   <div class='want-to-skip-first-a'>4</div>
   <div class='want-to-skip-first-a'>5</div>
   <div class='want-to-skip-first-a'>6</div>
</div>

Check out the solution here

Answer 6

Don't overcomplicate things, it's simple. All you have to do is assign a class to the div elements where you want specific CSS properties. In this scenario, there are 6 elements and you just need to add the class to all except the first one.

<div>
   <div >1</div>
   <div class='want-to-skip-first-a'>2</div>
   <div class='want-to-skip-first-a'>3</div>
   <div class='want-to-skip-first-a'>4</div>
   <div class='want-to-skip-first-a'>5</div>
   <div class='want-to-skip-first-a'>6</div>
</div>

Check out the solution here

Ignore the initial children of the highest level divs exclusively

Answer №1

Answer №2

Answer №3

Similar questions

Tips for arranging Radio buttons in multiple columns within the same Radio group in Material UI

Ensure that the view remains consistent while navigating a table that contains expanding concealed information

Add an arrow or triangle at the tip of the line

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

"Transforming a static navbar to a fixed position causes the page to jump

Utilize page variables to activate audio clips upon clicking

Setting the height of a child tag: A step-by-step guide

What is the best way to modify React state?

Modifying the href attribute of links within various occurrences of an element using jQuery based on its content

Is there a conflict between bootstrap.min.JS and chart.min.js?

Streamlining all icons to a single downward rotation

Utilizing jQuery to dynamically add or remove a class based on the selected radio button option

Tips for altering value by selecting radio buttons

Step-by-step guide on crafting a harmonious row of a label and a responsive button group

Establishing the initial value for an input file form

Differences in typography across Mozilla Firefox and Internet Explorer

Obtaining the node generated from a document fragment

Organizing your thoughts: Utilizing Etherpad-Lite's list

Is there a way to position two forms next to each other in alignment?

What's the best way to prevent extra spacing when typing in a materialUI TextField?