How negate the condition in CSS

Question

Below is my code, I am naive in HTML/CSS, Let me know if I missed any thing here.

.dropdown-menu>li>a {
  padding: 3px 5px;
}

<li>
  <a id="btn-other-1" href="#">
    <!–- I do not want apply css for this anchor tag because it has i inside –->
    <i class="fa fa-check" aria-hidden="true"></i>
    <span> Other stuff-1? </span>
  </a>
</li>
<li>
  <a id="btn-other-2" href="#">
    <span> Other stuff-2 </span>
  </a>
</li>

The problem is that the given css code applies to all anchor tag <a> which is inside <li> but I don't want to apply it on anchor tag <a> which has <i> tag inside.

How to do I do that in CSS?

Answer 1

As already stated by kravisingh, no parent selector in CSS for now.

Without changing your HTML, there's a workaround for your example: you can apply padding to children of link and the good news is - in your example - you can easily distinguish in pure CSS the children in both cases.

I used :only-child to select a span element without any sibling (thus no i element before or after), demonstrated below.
You also have in your toolbox:

• :first-child (if span matches then it means there is no i before it)
• :last-child
• + the adjacent sibling (i + a { /* */ } is a strictly following an i?)
• ~ the general sibling (i ~ a { /* */ } is a following an i, maybe with other elements in-between?)
• and :not() (ex: span:not(:only-child): span elements that aren't alone in their parent element, may be preceded or followed by other span or i or …)

Notes:

• This workaround won't work for all styles and cases :/
• It's easier to add a class on parent (see Amit's answer) but there are cases where you can't modify markup or where a CSS solution is easier than modifying the back/front-end functions that generates markup (though it's then harder to maintain code IMHO)

Codepen

/* CSS from question (example #1) */
.on-link > li > a {
  display: inline-block;
  padding: 3px 5px;
  background-color: lightgreen;
}

/* Example #2 */

/* Applies to i+span */
.on-children i {
  /*padding: 3px 0 3px 5px;*/
  background-color: lightblue;
}

.on-children i + span {
  /*padding: 3px 5px 3px 0;*/
  background-color: pink;
}

/* Applies to any span without an icon  (after or before)
Note: :first-child would allow for an icon at the end of the link */
.on-children span:only-child {
  padding: 3px 5px;
  background-color: tomato;
}

/* Demo */
.on-children i:before {
  content: 'i ';
}

<h1>Styles link (original styles from OP)</h1> 
<ul class="on-link">
  <li>
      <a id="btn-other-1" href="#">            <!–- I do not want apply css for this anchor tag because it has i inside –->
          <i class="fa fa-check" aria-hidden="true">
          </i><span>Other stuff-1? </span>
      </a>
  </li>
  <li>
      <a id="btn-other-2" href="#">
          <span>Other stuff-2</span>
      </a>
  </li>
</ul>

<hr>

<h1>Styles children of link (my answer)</h1>
<ul class="on-children">
  <li>
      <a id="btn-other-1" href="#">            <!–- I do not want apply css for this anchor tag because it has i inside –->
          <i class="fa fa-check" aria-hidden="true"></i><span>Other stuff-1?</span>
      </a>
  </li>
  <li>
      <a id="btn-other-2" href="#">
          <span>Other stuff-2</span>
      </a>
  </li>
</ul>

Answer 2

If there was in a first li than you can use :first-child selector

.dropdown-menu > li:first-child > a {
  padding: 0;
}

Or you can use id or class name of a tag

<li>
    <a id="btn-other-1" href="#" class="icon">            <!–- I do not want apply css for this anchor tag because it has i inside –->
        <i class="fa fa-check" aria-hidden="true"></i>   
        <span> Other stuff-1? </span>
    </a>
</li>
<li>
    <a id="btn-other-2" href="#">
        <span> Other stuff-2 </span>
    </a>
</li>

.dropdown-menu > li > a:not(.icon) {
      padding: 3px 5px;
}

Answer 3

There is no any way in css to apply a selection to their parent. So you must need to use jquery or javascript for this.

$('.dropdown-menu a i').parent().css('padding','0');

Hope it will help you.

Answer 4

Check for combinators here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors, but i don't think there will a direct combinator available.

The easiest option would be assign a dummy classname to anchor with i tag, and a different to anchor without i tag.

<li>
    <a id="btn-other-1" href="#" class="itag">            <!–- I do not want apply css for this anchor tag because it has i inside –->
        <i class="fa fa-check" aria-hidden="true"></i>   
        <span> Other stuff-1? </span>
    </a>
</li>
<li>
    <a id="btn-other-2" href="#" class="noitag">
        <span> Other stuff-2 </span>
    </a>
</li>

Then use it like.

.dropdown-menu > li > a.noitag {
  padding: 3px 5px;
}