如何<strong>通过 css</strong>检查列表是否包含第一个元素

Question

 <div class="container"> <ul> <li class="info">Testing Bold text in custom bullets</li> <li class="info"><strong>Testing</strong> Bold text in custom bullets</li> <li class="info">Testing <strong>Bold</strong> text in custom bullets</li> <li class="info">Testing Bold <strong>text</strong> in custom bullets</li> <li class="info">Testing Bold text <strong>in</strong> custom bullets</li> <li class="info">Testing Bold text in <strong>custom</strong> bullets</li> <li class="info">Testing Bold text in custom <strong>bullets</strong></li> <li class="info">Testing Bold text in custom bullets</li> </ul> </div>

Above HTML is dynamically generated, If <strong> comes first in li (eg 2nd <li> ) then only I need to do some styling.

Can you please advise if it can be possible via CSS or other alternative?

Answer 1

CSS isn't really made for this case, but it would be possible with JavaScript.

Really the best thing to do is structure your HTML more semantically, and use a class where you need it.

But since you're generating the HTML dynamically and don't have control over the output, here is a solution with JS.

 document.querySelectorAll('ul li').forEach(element => { if (element.innerHTML.startsWith('<strong>') ) { element.querySelector('strong').style = 'color:red' } })

 <div class="container"> <ul> <li class="info">Testing Bold text in custom bullets</li> <li class="info"><strong>Testing</strong> Bold text in custom bullets</li> <li class="info">Testing <strong>Bold</strong> text in custom bullets</li> <li class="info">Testing Bold <strong>text</strong> in custom bullets</li> <li class="info">Testing Bold text <strong>in</strong> custom bullets</li> <li class="info">Testing Bold text in <strong>custom</strong> bullets</li> <li class="info">Testing Bold text in custom <strong>bullets</strong></li> <li class="info">Testing Bold text in custom bullets</li> </ul> </div>

Answer 2

Using javascript you can check the first Node of each <li> and apply a class or inline style to it

Following also accounts for empty text nodes as a result of line breaks in the html

 document.querySelectorAll('.container li').forEach(el => { let firstNode = el.childNodes[0]; // account for empty text nodes while (firstNode.nodeType === 3 &&.firstNode.textContent.trim()) { firstNode = firstNode.nextSibling } if (firstNode.nodeName === 'STRONG') { firstNode.classList.add('first-bold') } })

 .first-bold { color: red }

 <div class="container"> <ul> <li class="info">Testing Bold text in custom bullets</li> <li class="info"><strong>Testing</strong> Bold text in custom bullets</li> <li class="info">Testing <strong>Bold</strong> text in custom bullets</li> <li class="info">Testing Bold <strong>text</strong> in custom bullets</li> <li class="info">Testing Bold text <strong>in</strong> custom bullets</li> <li class="info"> <strong>Testing</strong> Bold text in <strong>custom</strong> bullets </li> <li class="info">Testing Bold text in custom <strong>bullets</strong></li> <li class="info"> Testing Bold text in custom bullets</li> </ul> </div>

Answer 3

ul li:first-child strong {... } will do the trick.

Sorry, I misread your question. What you want to do isn't really possible in CSS, as far as I know. Best thing to do is have whatever's generating the HTML add a class with the styling you want when it puts a <strong> element at the start of a list item.

Answer 4

You can apply below style sheet to recognize first child with strong tag:

li:first-child > strong {
  background-color: yellow;
}