Hide List with One Element with Pure CSS

Hide list with one element with pure CSS

There is a pseudo class for this: :only-child (MDN)

So if I have the following CSS

li:only-child {
    display: none;
}

.. the list items will only be displayed if there is more than one list item.

FIDDLE

(Note: Like Quentin said, it doesn't hide the actual list - just the list item when it is the only child... but as long as the list itself doesn't have its own styling this would be the same as hiding the list)

Also here is an excerpt from the above MDN article:

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.

PS: As you can see from MDN Browser support - IE8 doesn't support this, so for IE8 you're out of luck for a pure CSS solution.

Single button to show/hide element with pure CSS

This could help

.details,.show,.hide:target {  display: none;}.hide:target + .show,.hide:target ~ .details {  display: block;}

<div>  <a id="hide1" href="#hide1" class="hide">+ Expand</a>  <a id="show1" href="#show1" class="show">- Expand</a>  <div class="details">    Content goes here.  </div>  </div>

Hide number in ordered list if there is only one element in the list

li:only-of-type { list-style-type: none; }

<h1>List 1</h1>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
</ol>

<h1>List 2</h1>
<ol>
  <li>Coffee</li>
</ol>

Hide Show content-list with only CSS, no javascript used

I wouldn't use checkboxes, i'd use the code you already have

DEMO http://jsfiddle.net/6W7XD/1/

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

This way the text is only hidden on click of the hide element

Need to Hide one List Element

If you know the list item position, and it is fixed within the parent list (it's always 1st, or 2nd, etc...), you can use nth-child. So, if the item is third in the list, you can do:

ul li:nth-child(3) {
  display: none;
}

However, you still need to qualify the parent ul; otherwise, this will affect all list elements on the page.

If this is not the case, you might have to use JavaScript. And if data-page="earn" is unique to the contained, element, you can do something like this if You have jQuery. Otherwise you can use querySelector:

$('a[data-page="earn"]').parent('li').remove();

Pure CSS (no jQuery), hide one div, show another?

A little bit tricky but its work!

section {  position: relative;}
section > .content {  position: absolute;  top:100%;  left: 0;}
.collapse{  cursor: pointer;  display: block;  background: #cdf;}.collapse + input{  display: none; /* hide the checkboxes */}.collapse + input + div{  display:none;}.collapse + input:checked + div{  display:block;}

<section>  <label class="collapse" for="_1">Collapse 1</label>  <input id="_1" type="radio" name="c1">   <div class="content">Content 1</div>
  <label class="collapse" for="_2">Collapse 2</label>  <input id="_2" type="radio" name="c1">  <div class="content">Content 2</div></section>

What is the simplest way to implement pure css show/hide?

there is a plethora of options based on the structure (for modern browsers).

Have a look at the

1. selector + selector  adjacent sibling selector
2. selector ~ selector  general sibling selector
3. selector selector      descendant selector
4. selector > selector  child selector

These can be combined with classes / ids / pseudo-selectors like :hover etc, and create a big list of options.

here is a small demo i made to showcase them : http://jsfiddle.net/gaby/8v9Yz/

---

Related Topics