Selecting CSS tag excluding the first-child element

Question

Selecting CSS tag excluding the first-child element

My goal is to use CSS to target the li elements in a list that do not have a description and are not the first-child with a b element. I want to apply padding-left to these specific li elements that do not have a title.

<ul>
    <li><b>title</b>description</li>
    <li><b>title</b>description</li>
    <li>description without title</li>
    <li><b>title</b>description</li>
</ul>

I am looking for something similar to this:

ul li:not[first-child=b]

Note: I am unable to add individual classes to each li element. Thank you!

css

Answer 1

Answer №1

Up until this point, it has not been possible to target list items based on their content. However, if the objective is simply to add a padding-left to the li elements without a title in the HTML, you can achieve this by following these steps:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 20px;
}

li > b:first-child {
  margin-left: -15px;
}

<ul>
  <li><b>title</b>description</li>
  <li><b>title</b>description</li>
  <li>description without title</li>
  <li><b>title</b>description</li>
</ul>

Answer 2

Up until this point, it has not been possible to target list items based on their content. However, if the objective is simply to add a padding-left to the li elements without a title in the HTML, you can achieve this by following these steps:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 20px;
}

li > b:first-child {
  margin-left: -15px;
}

<ul>
  <li><b>title</b>description</li>
  <li><b>title</b>description</li>
  <li>description without title</li>
  <li><b>title</b>description</li>
</ul>

Answer 3

Answer №2

Using CSS to target elements based on their internal content is currently not possible due to browser limitations. However, this functionality may be developed in the future.

Answer 4

Using CSS to target elements based on their internal content is currently not possible due to browser limitations. However, this functionality may be developed in the future.

Answer 5

Answer №3

Here is a helpful workaround:

ul{
    padding-left:5px;
}
li > b{
    margin-left:-5px;
}

Answer 6

Here is a helpful workaround:

ul{
    padding-left:5px;
}
li > b{
    margin-left:-5px;
}

Selecting CSS tag excluding the first-child element

Answer №1

Answer №2

Answer №3

Similar questions

Developing an editor

Incorporate my personal design flair when utilizing third-party React.js component libraries

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Personalized color scheme for calendar td

What is the best way to distinguish the Footer from the Content?

Is this loader going through a triple loop?

My image is being cropped on larger screens due to the background-size: cover property

Customize your Bootstrap hamburger menu with a unique open and close button design

Create a dynamic calendar by integrating dates with Javascript and an HTML table

Container contents are spilling out of control after adjusting container height to auto

Tips for streamlining the use of hidden and visible div elements with concise code

The Ineffectiveness of the Form Class

Best practices for organizing your Obelisk project include creating a specific folder for CSS files within

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

The font weight is failing to take effect

Tips on steering clear of the issue of "Automatic grid alignment" when working with Bootstrap?

Reveal Visual Content upon Hovering

Menu with full-width navigation and dropdown options

Using a border-radius on Internet Explorer 11 reveals the background through the corners