Perform the following task for each initial list item within an unordered list:

Question

Perform the following task for each initial list item within an unordered list:

Here is the code I'm working with:

ul {
  list-style-type: none;
}

ul:not(.sub-menu) {
  padding: 0px;
}

ul li {
  padding-top: 10px;
}

ul li:first-child:not(.sub-menu) {
  margin-bottom: 30px;
}

.submenu {
  margin-left: 20px;
}

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>has submenu
    <ul class="submenu">
      <li>child</li>
      <li>child</li>
    </ul>
  </li>
</ul>

The challenge I am facing is ensuring that only li elements without a nested ul have a margin-bottom of 30px. Currently, this style affects the nested ul li elements as well.

I have tried using

ul li:first-child:not(.sub-menu li)

, but it doesn't work. Is there an alternative solution?

html css

Answer 1

Answer №1

If you're unable to modify the HTML directly and require a static solution, this code snippet should suffice.

ul > li:not(:nth-of-type(4)){
    margin-bottom: 30px;
}

The above CSS rule will apply a bottom margin of 30px to all direct child li elements inside the parent ul, except for the fourth one.

Alternatively,

If a dynamic approach is needed, jQuery can be utilized as shown below:

$('ul li').each(function(){ // Iterate through each li element

    if(!$(this).parent().hasClass('submenu')){ // Check if the parent does not have the 'submenu' class

        $(this).css('padding-bottom','30px'); // If not, add padding
    }

})

Answer 2

If you're unable to modify the HTML directly and require a static solution, this code snippet should suffice.

ul > li:not(:nth-of-type(4)){
    margin-bottom: 30px;
}

The above CSS rule will apply a bottom margin of 30px to all direct child li elements inside the parent ul, except for the fourth one.

Alternatively,

If a dynamic approach is needed, jQuery can be utilized as shown below:

$('ul li').each(function(){ // Iterate through each li element

    if(!$(this).parent().hasClass('submenu')){ // Check if the parent does not have the 'submenu' class

        $(this).css('padding-bottom','30px'); // If not, add padding
    }

})

Perform the following task for each initial list item within an unordered list:

Answer №1

Similar questions

Tips for organizing ng-repeat information according to a condition of true or false

"Ascend beyond the constraints of fixed measurements with dynamic

Creating a single div to overlay two divs solely for mobile devices can be achieved by using media queries and absolute

Trouble with reading from a newly generated file in a node.js program

Ways to extract a word from the source code of a webpage

What steps can be taken to safeguard the title of the document in the top window from being altered by any iframe or script?

Fixed-positioned elements

Add a pair of assorted div elements to a shared container

Creating a horizontal line to the left of centered text using CSS styling

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

Ensure that all divs have the same height and padding when resizing

How to dynamically set the image source in Vue.js using elements from a single object in a list

How to correctly position a modal in a React application using CSS

Converting Data from MySQL and PHP to Excel

Use jQuery to parse the JSON below and then showcase the information in an HTML table

Text area capacity

Using selenium in conjunction with python to click a unique button

The image data is not displaying in the $_FILES variable

Prevent bouncing effect in Cordova/Phonegap specifically for the header and footer sections

Tips for vertically centering elements in the header using flexbox