How to sequentually increase CSS value for Padding property for Hierarchy structure?

Question

I have hardcoded padding for each of the padding hierarchy level.

I need the solution for any of level without hardcoding padding for each level.

.jdm-nav li {
    font-size: 16px;
    position: relative;
}

.jdm-nav li a {
    padding-left: 15px;
}

.jdm-nav li li a {
    padding-left: 30px;
}

.jdm-nav li li li a {
    padding-left: 45px;
}

.jdm-nav li li li li a {
    padding-left: 60px;
}

li li li li ... a

Every next step could be increased by 15px.

Full code example. There is the mobile menu with ability to dropdown each item by click dropdown icon in the right item corner. If there are the items to expand.

.jdm-nav {
  background-color: white;
  width: 100%;
  padding: 0;
}

.jdm-nav ul {
  padding: 0;
}

.jdm-nav {
  list-style: none;
}

.jdm-nav li {
  list-style: none;
}

.jdm-nav ul {
  margin: 0;
}

.jdm-nav a {
  text-align: left;
  display: flex;
  color: rgb(76, 92, 104);
  font-weight: 500;
  padding: .5em 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(76, 92, 104, 0.1);
}

.jdm-nav li {
  font-size: 16px;
  position: relative !important;
}

.jdm-nav li a {
  padding-left: 15px;
}

.jdm-nav li li a {
  padding-left: 30px;
}

.jdm-nav li li li a {
  padding-left: 45px;
}

.jdm-nav li li li li a {
  padding-left: 60px;
}

.jdm-nav li {
  position: relative;
}

.jdm-nav li>[data-jdm-sub-menu-switcher] {
  font-size: 13px;
  display: flex;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgba(76, 92, 104, 0.1);
  position: relative;
}

.jdm-nav li {
  position: relative !important;
}

.jdm-nav li.menu-item-has-children>ul {
  max-height: 0;
  overflow: hidden;
  transition: 150ms max-height ease-out;
}

.jdm-nav li.menu-item-has-children>ul[data-jdm-state="expanded"] {
  max-height: initial;
}

.jdm-nav li.menu-item-has-children> :first-child {
  grid-column: 1;
}

.jdm-nav li.menu-item-has-children>[data-jdm-sub-menu-switcher] {
  grid-column: 2;
}

.jdm-nav li.menu-item-has-children>ul {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.jdm-nav li>[data-jdm-sub-menu-switcher]::after {
  position: absolute;
}

.jdm-nav li>[data-jdm-sub-menu-switcher]::after {
  position: absolute;
  width: 1em;
  height: 1em;
  content: '';
  clip-path: url(#prefix-mobile-dropdown-clip-mask);
  font-size: 13px;
  background-color: rgb(76, 92, 104);
  display: inline-flex;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
}

.jdm-nav li.menu-item-has-children {
  display: grid;
  grid-template-columns: 100fr 15fr;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div id="prefix-mobile-menu" class="mobile-menu-area prefix-mobile-menu" data-prefix-status="collapsed">
  <nav id="mobile-menu" class="jdm-nav">
    <ul id="primary-menu" class="menu-overflow">
      <li id="menu-item-2420" class="menu-item-has-children">
        <a href="1">1</a>
        <button data-jdm-sub-menu-switcher=""></button>
        <ul class="sub-menu" style="" data-jdm-state="expanded">
          <li id="menu-item-2418" class="menu-item-has-children"><a href="#">1.1</a>
            <button data-jdm-sub-menu-switcher=""></button>
            <ul class="sub-menu" style="" data-jdm-state="expanded">
              <li id="menu-item-2434" class="menu-item-has-children"><a href="1.1">1.1.1</a>
                <button data-jdm-sub-menu-switcher=""></button>
                <ul class="sub-menu">
                  <li id="menu-item-2435">
                    <a href="1.1.1.1">1.1.1.1</a>
                  </li>
                  <li id="menu-item-2436"><a href="1.1.1.2">1.1.1.2</a>
                  </li>
                  <li id="menu-item-2437"><a href="1.1.1.3/">1.1.1.3</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-1832"><a href="2/">2</a></li>
    </ul>
  </nav>
  <svg width="0" height="0" viewBox="0 0 448 512">
  <defs>
   <clipPath
     viewbox="0 0 448 512"
     transform="scale(0.00223, 0.00195)"
     clipPathUnits="objectBoundingBox"
     id="prefix-mobile-dropdown-clip-mask">
    <path fill="#000000"
      d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"
      class=""></path>
   </clipPath>
  </defs>
 </svg>
</div>

Put the padding on the `li` and stretch the left of the `a` out by a large fixed amount, I guess. (This is only a guess at what you’re trying to achieve, it doesn’t literally increase the padding on each `a`. Adding that information to your question might help.) — Ry-, Mar 14 '20 at 05:46

score 1 · Accepted Answer · answered Mar 14 '20 at 05:59

Put the padding on the li and stretch the left of the a out by a large fixed amount.

Illustrated:

body > ul {
  border: 1px solid #eee;
  border-radius: 2px;
  margin: 1em;
  padding: 1em;
  overflow: hidden;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding-left: 15px;
}

a {
  display: block;
  margin-left: -150px;
  margin-right: -1em;
  padding-left: 150px;
}

a:hover {
    background-color: #cff;
}

<ul>
  <li>
    <a href="javascript:;">nested</a>
    <ul>
      <li>
        <a href="javascript:;">navigation</a>
        <ul>
          <li>
            <a href="javascript:;">forever</a>
            <ul>
              <li>
                <a href="javascript:;">and</a>
                <ul>
                  <li>
                    <a href="javascript:;">ever</a>
                </ul>
            </ul>
        </ul>
      <li>
        <a href="javascript:;">foo</a>
      <li>
        <a href="javascript:;">bar</a>
    </ul>
  <li>
    <a href="javascript:;">baz</a>
</ul>

(Notice how the clickable area of each link extends all the way to the left.)

score 0 · Answer 2 · answered Mar 14 '20 at 06:02

you can use this code for solve your problem

.jdm-nav li {
    font-size: 16px;
    position: relative;
}

.jdm-nav li{
   font-size:1.2em;
   padding-left: 3em;
}
.jdm-nav li a {
    
    background-color:red;
    font-size:16px;
}

<ul class="jdm-nav">
  <li>
    <a>Item1</a>
    <ul>
    <li>
      <a>Item2</a>
      <ul>
        <li>
          <a>Item3</a>
          
        </li>
      </ul>
    </li>
    </ul>
  </li>
</ul>

score -6 · Answer 3 · answered Mar 14 '20 at 05:45

-6

use pseudo function of css to increase the padding of every children by 15px.

answered Mar 14 '20 at 05:45

Praful Khandagale

1

CSS doesn't have "pseudo functions". Can you post a link or reference to the CSS spec regarding what you're referring to? – Dai Mar 14 '20 at 05:46
@Dai a related question to understand why your code (deleted answer) isn't working: https://stackoverflow.com/q/49973885/8620333 .. you will also find and idea for an ul/li structure – Temani Afif Mar 14 '20 at 10:29

How to sequentually increase CSS value for Padding property for Hierarchy structure?

3 Answers3