CODEWITHSUNDEEP
css
nonopolarity
nonopolarity

Reputation: 151036

Using CSS only, is it possible to make a UL list have no bullet when it has only one item?

Is it possible to use CSS only, to have a solution that works even on IE8, that

  1. when a <ul> list has 2 or more items, then keep the bullets in front of the items as usual.
  2. when there is only 1 item, then don't show the bullet, because it can be strange that a single item has a bullet in front of it.

An example is shown on http://jsfiddle.net/SzQL6/37/

<input id="an-input">
<ul id="the-list">
    <li>error msg 1</li>
    <li>error msg 2</li>
</ul>

(The error messages should be left-aligned with the left edge of the input box above the error messages, when there are bullets and when there is no bullet.)

Using JavaScript, I could do it: http://jsfiddle.net/SzQL6/40/

But can this be done by CSS only (and that it can work on IE8)?

Upvotes: 1

Views: 290

Answers (1)

Kroltan
Kroltan

Reputation: 5156

Yes, you can do it with CSS only, though it is only compatible with CSS3 (which anybody with a updated browser will have, or as Guffa pointed out, IE >= 9), by using the :only-child pseudo-class selector:

.error-list { list-style-position: inside; margin-top: 0; color: #f77 }
.error-list li:only-child { list-style-type: none; }

The rule is being applied to any li element that is the only child of its parent (.error-list). According to MDN:

The :only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

See the example on this fiddle: http://jsfiddle.net/SzQL6/41/

Upvotes: 3

Related Questions