What is the best way to reverse a condition in CSS?

Question

What is the best way to reverse a condition in CSS?

Here is my HTML/CSS code, I am relatively new to this field. Please let me know if I have overlooked anything.

.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 issue I am facing is that the CSS code I provided applies to all anchor tags within <li>, but I want to exclude the ones with an <i> tag inside them.

How can I achieve this in CSS?

html css

Answer 1

Answer №1

Unfortunately, CSS does not have the capability to select and style a parent element. To achieve this functionality, you would need to utilize either jQuery or JavaScript.

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

I trust this information proves useful to your needs.

Answer 2

Unfortunately, CSS does not have the capability to select and style a parent element. To achieve this functionality, you would need to utilize either jQuery or JavaScript.

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

I trust this information proves useful to your needs.

Answer 3

Answer №2

It has been noted by kravisingh that there is currently no parent selector in CSS.

Even without altering your HTML structure, there is a workaround for the given example: you can add padding to the children of the link element. The great thing about your specific case is that you can easily differentiate between the children using just CSS.

I utilized the :only-child pseudo-class to target a span element which has no siblings (meaning there are no preceding or following sibling elements), as illustrated below.
Additionally, CSS offers these selectors at your disposal:

:first-child (if the span matches, it implies there is no preceding i element)
:last-child
+ the adjacent sibling combinator (i + a { /* */ } targets an a immediately following an i?)
~ the general sibling combinator (i ~ a { /* */ } selects an a that comes after an i, possibly with other elements in between?)
and :not() (e.g., span:not(:only-child): span elements that are not the sole child within their parent, potentially having neighboring span or i elements…)

Points to consider:

This workaround may not be applicable to all styles and scenarios :/
While adding a class to the parent element (as recommended by Amit) might be easier, there are instances where modifying the markup isn't feasible or where a CSS approach is more straightforward than adjusting the backend/frontend functions responsible for generating the markup (even though maintaining code could become more challenging in such cases).

Codepen

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

/* Example #2 */

/* Targets 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;
}

/* Selects any span without an icon (neither before nor after)
Note: :first-child would accommodate an icon placed at the end of the link */
.on-children span:only-child {
  padding: 3px 5px;
  background-color: tomato;
}

/* Demonstration */
.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 4

It has been noted by kravisingh that there is currently no parent selector in CSS.

Even without altering your HTML structure, there is a workaround for the given example: you can add padding to the children of the link element. The great thing about your specific case is that you can easily differentiate between the children using just CSS.

I utilized the :only-child pseudo-class to target a span element which has no siblings (meaning there are no preceding or following sibling elements), as illustrated below.
Additionally, CSS offers these selectors at your disposal:

:first-child (if the span matches, it implies there is no preceding i element)
:last-child
+ the adjacent sibling combinator (i + a { /* */ } targets an a immediately following an i?)
~ the general sibling combinator (i ~ a { /* */ } selects an a that comes after an i, possibly with other elements in between?)
and :not() (e.g., span:not(:only-child): span elements that are not the sole child within their parent, potentially having neighboring span or i elements…)

Points to consider:

This workaround may not be applicable to all styles and scenarios :/
While adding a class to the parent element (as recommended by Amit) might be easier, there are instances where modifying the markup isn't feasible or where a CSS approach is more straightforward than adjusting the backend/frontend functions responsible for generating the markup (even though maintaining code could become more challenging in such cases).

Codepen

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

/* Example #2 */

/* Targets 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;
}

/* Selects any span without an icon (neither before nor after)
Note: :first-child would accommodate an icon placed at the end of the link */
.on-children span:only-child {
  padding: 3px 5px;
  background-color: tomato;
}

/* Demonstration */
.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 5

Answer №3

Make sure to look for combinators in this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors, although there may not be a direct combinator available.

An easy solution would be to assign a dummy classname to anchors with the i tag and a different one to anchors without the 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 you can use it like this.

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

Answer 6

Make sure to look for combinators in this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors, although there may not be a direct combinator available.

An easy solution would be to assign a dummy classname to anchors with the i tag and a different one to anchors without the 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 you can use it like this.

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

Answer 7

Answer №4

If the first element is a li, you can target it using the :first-child selector

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

Alternatively, you can differentiate by using the id or class name of the 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 8

If the first element is a li, you can target it using the :first-child selector

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

Alternatively, you can differentiate by using the id or class name of the 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;
}

What is the best way to reverse a condition in CSS?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

hiding form fields using javascript

A guide to efficiently filling multiple rows of images with different heights while preserving their aspect ratio

What is causing the QJsonValue(undefined) to be returned?

React - Obtain User Login Details and Verify

Modify the indentation format in CSS/JS

Avoid HTML code injection in an ExtJS4 grid by properly escaping the href attribute

What is the best way to make sure the embedded object fills the entire height of the container div?

Is misbehavior expected at approximately 600 pixels in width?

What are the steps for implementing the Ionic 2 Pulling Refresher feature in my application?

What could be causing my handle button to slide off the timeline towards the right?

Allow only specified tags in the react-html-parser white list

Making an entire webpage background clickable using just HTML and CSS

Integrating Labels on External Websites with ASP.NET

Tips for customizing css for image tags

What is the process for altering the active status in pagination?

I'm having trouble getting this text to align properly next to the image. Plus, I can't seem to achieve a horizontal screen alignment either

What is the expected output format for htmlspecialchars?

Update content and image when clicking or hovering using Javascript

What is the best way to click on a specific webElement in a group of webElements using Python Selenium?

Establishing a unique title and favicon for non-HTML files on a website