Choose <li> which does not have

Question

Bonjour

I would always like to have the same complement in <li>, but when is the link that is in <a>(for a large selection area).

li a {
  padding: 1rem;
}

li:not(a) {
  padding: 1rem;
}

<ul>
  <li><a href='#'>Text</a></li>
  <li>Text</li>
  <li><a href='#'>Text</a></li>
</ul>

Run code

• I want to fill in <a>when it exists, and no more in<li>
• And when not <a>, the gasket is in<li>

Answer 1

The solution is to use negative margins on a, and then the indent awill be in the same position as li.

li {
  padding: 1rem;
}

li a {
  margin: -1rem;
  padding: 1rem;
}

<ul>
  <li><a href='#'>Text</a></li>
  <li>Text</li>
  <li><a href='#'>Text</a></li>
</ul>

Run code

Answer 2

, - , , , .

CSS ( ):

li, <a>. calc, , <li>.

CSS, , .

:root {
  --li-padding: 1em;
}

li {
  height: calc(100% + (var(--li-padding) * 2));
  line-height: calc(100% + (var(--li-padding) * 2));
  background: tomato;
}

li>* {
  padding: 0 var(--li-padding);
}

li a {
  display: inline-block;
  background: rgba(255, 255, 255, 0.6);
}

<ul>
  <li><a href="#">Line 1</a></li>
  <li><span>Line 2</span></li>
  <li><a href="#">Line 3</a></li>
</ul>

CSS ( ):

CSS 4, - , , .

Mozilla

li:not(::has(> a)) {
  padding: 1em;
}

li>a {
  padding: 1em;
}

<ul>
  <li><a href="#">Line 1</a></li>
  <li>Line 2</li>
  <li><a href="#">Line 3</a></li>
</ul>

Javascript:

javascript, <li> , , , , ( , , <a>).

let liSelector = document.querySelectorAll('li');

for (let i = 0; i < liSelector.length; i++) {
  let str = liSelector[i].innerHTML;
  if (str.includes("</a>")) {
    liSelector[i].querySelector('a').style.padding = "1em";
    liSelector[i].querySelector('a').style.display = "inline-block";
  } else {
    liSelector[i].style.padding = "1em";
  }
}

li {
  background: tomato;
}

li a {
  background: rgba(255, 255, 255, 0.6);
}

<ul>
  <li><a href="#">Line 1</a></li>
  <li>Line 2</li>
  <li><a href="#">Line 3</a></li>
</ul>

: - , , , , , , 🙂

Answer 3

Here you are in jQuery:

$('li').each(function() {
    if($(this).find('a').length) {
       $(this).addClass('extrapadding');
    }
});

.extrapadding a {
  padding: 1rem;
}

li:not(.extrapadding) {
  padding: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href='#'>Text</a></li>
<li>Text</li>
<li><a href='#'>Text</a></li>
</ul>

Run code