-1

I have the following CSS style that applies padding-right and changes the font-size on a span that is found inside of an a tag.

But, for other links that do not have a span inside of them, I want to apply padding-right: 1.35rem; to keep the links virtually lined up.

Here is my CSS code that adds the padding-right

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a > span {
    padding-right: 0.50rem;
     font-size: .85rem;
 }

How can I apply CSS code only when the span does not exist inside of the a tag?

Junior
  • 11,602
  • 27
  • 106
  • 212
  • using `:has()` [probably](https://stackoverflow.com/a/1014958/3654837) – Mukyuu Jan 22 '19 at 01:49
  • 3
    For all intents and purposes, `:has()` does not exist in CSS. I'ts merely a proposal. It is [not supported by a single browser](https://developer.mozilla.org/en-US/docs/Web/CSS/:has#Browser_compatibility). OP, what you're requesting can't really be done in CSS, as the "C" in "CSS" stands for *cascading*. It can only traverse downwards, not upwards. By that logic, once you go downwards to the `` level to check its existence, you can't apply style *back upwards* to the parent. You'll have to use a JavaScript workaround. – Tyler Roper Jan 22 '19 at 01:50
  • Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) **,** [CSS equivalent of :has()](https://stackoverflow.com/questions/29037763/css-equivalent-of-has) **,** [CSS selector - element with a given child](https://stackoverflow.com/questions/4220327/css-selector-element-with-a-given-child) – Tyler Roper Jan 22 '19 at 01:55

2 Answers2

0

Unless :has() is launched.

The best I could think of is by writing the default setting in a before you specify to span. For example:

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a{
    padding-right: 0;
    font-size: 1.4rem;
}

See snippet for some demo: 

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a > span {
    padding-right: 0.50rem;
    font-size: .85rem;
}
 
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a{
    padding-right: 0;
    font-size: 1.4rem;
}
<div class="sidebar-wrapper">
 <div class="sidebar-menu">
  <div class="sidebar-dropdown">
   <div class="sidebar-submenu">
    
    <!-- li a with span -->
    <li>
     <a>
      <span>
       test
      </span>
     </a>
    </li>
    <!-- li a without span -->
    <li>
     <a>
     test
     </a>
    </li>
    <li>
     <a>
     test
     </a>
    </li>  
    <!-- li a with span -->
    <li>
     <a>
      <span>
       test
      </span>
     </a>
    </li>
    
   </div>
  </div>
 </div>
</div>
Mukyuu
  • 6,436
  • 8
  • 40
  • 59
0

Eliminate the <span> and add an id= to the anchors that should require a different amount for the padding-right style. 

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a {
    padding-right: 0.50rem;
    font-size: .85rem;
 }

#chgpadding {
    padding-right: 1.40rem;
}

Your related html would be <a href="" id="chgpadding"></a> instead of <a href=""><span></span></a>. Since you only have one element featured in the #chgpadding style, CSS will (by default) give it precidence over the ...li a (parent) style.

elbrant
  • 763
  • 5
  • 16