CODEWITHSUNDEEP
htmlcss
Ruan Mendes
Ruan Mendes

Reputation: 92274

How to make a single item list look like a regular paragraph with CSS only

I have a place where the number of items in a list is dynamic and I'd like to not have a single item list because it looks kind of funny.

I could detect that condition in JavaScript and style it accordingly but I'd like to know if it's doable in CSS only.

I can't use :only-child because I need to target the ul and, as most CSS devs know, there's no way to select upwards in CSS to set its padding to 0. Hacking negative margin on the li would only work for specific browsers/settings.

ul.single-item{
  padding: 0;
}
ul.single-item li{
  list-style: none
}

li:only-child {
  list-style: none
}
<p>I'm just a paragraph</p>

<ul class="single-item">
  <li>I have a hardcoded single-item class</li>
</ul>

<ul>
  <li>I don't have a hardcoded class</li>
</ul>

<ul>
  <li>Something</li>
  <li>Something else with two items, no CSS classes here</li>
</ul>

Do I have to resort to JS to add a single-item CSS class?

Upvotes: 1

Views: 922

Answers (3)

Soothran
Soothran

Reputation: 1243

I just tried to do it in a new approach, absolutely positioning the li when there's only one item. But this approach has its own problems. This will work only if the single list item is so small such that it will not overlap other placeholders. So this method is not recommended if you are not sure the list item content will stay in single line always.

ul {
  position: relative;
  /*need a margin bottom to avoid the overlapping */
  margin-bottom: 50px;
}

ul li {
  list-style: none;
  position: absolute;
  left: 0;
}

ul li:not(:only-child) {
  list-style: disc;
  position: relative;
}
<p>I'm just a paragraph</p>
<ul>
  <li>A short line</li>
</ul>

<ul>
  <li>Something</li>
  <li>Something else with two items, no CSS classes here</li>
</ul>

<ul>
  <li>Long line Long line Long lineLong line Long line Long line Long lineLong lineLong line Long line Long line Long line Long line Long line Long line Long lineLong line Long line Long line Long lineLong lineLong line Long line Long line Long line Long lineLong line Long line Long lineLong line Long line Long line Long lineLong lineLong line Long line Long line Long line Long line</li>
</ul>

<ul>
  <li>Something</li>
  <li>Something else with two items, no CSS classes here</li>
</ul>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272909

Make the default behavior of ul without padding and then use it inside the li

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

ul li:not(:only-child){
  margin-left:40px;
  list-style: disc;
}
<p>I'm just a paragraph</p>

<ul >
  <li>I have a hardcoded single-item class</li>
</ul>

<ul>
  <li>I don't have a hardcoded class</li>
</ul>

<ul>
  <li>Something</li>
  <li>Something else with two items, no CSS classes here</li>
</ul>

Upvotes: 3

Aaron3219
Aaron3219

Reputation: 2225

I don't understand the problem with not using :only-child. Yes, hacking negative padding to the li items might not work, but there are other ways to do this.

ul > li:only-child {
  list-style: none;
  position: relative;
  right: 40px;
}
<p>I'm just a paragraph</p>

<ul>
  <li>I'm a single item, styled as a paragraph</li>
</ul>

<ul>
  <li>Here are multiple items</li>
  <li>They are, therefore, not styled as a paragraph</li>
</ul>

The default padding is 40px. So why not use position: relative? Correct me if I understood your question wrong.

Upvotes: 1

Related Questions