Question

I have a list that is empty at first, and gets populated dynamically with JavaScript. Now I want the list to have a border only when not empty, but :empty and parent selectors do not match.

In the html.erb file, the list is declared as this:

<ul id="cepage_list" />

It’s populated (adding lis) upon user input in a form above, that’s working fine.
Now I have this in the CSS:

ul#cepage_list
{
  list-style-type: none;
  margin: 0px;
  padding-left:0px;
  background-color: white;     
}
ul#cepage_list:parent
{
  border: 1px dotted blue;
}
ul#cepage_list:empty
{
  border: 1px dotted red;
}

Default style applies correctly, but the ones with pseudo-class selectors apply weirdly. Here’s the behavior:

• on page load, red border applies, that’s ok
• on adding li‘s, nothing (would expect the :parent selector applies)
• on clearing the list ( .empty() with jQuery), OK.

But why is the :parent pseudo-class not recognized when there are child lis under the list?

(tested on Chrome and Firefox 14)

Answer 1

<ul> is not a self-closing tag. Change it to:

<ul id="cepage_list"></ul>

Also, :parent isn’t a real pseudo-class. Did you mean :not(:empty)?