CODEWITHSUNDEEP
csscss-selectors
Antoine
Antoine

Reputation: 5255

Why is the CSS selector :parent not working?

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:

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

(tested on Chrome and Firefox 14)

Upvotes: 0

Views: 3732

Answers (2)

Vin Burgh
Vin Burgh

Reputation: 1419

There isn't a :parent selector as to which you refer to it as.

Here's a link for more about parent selectors.

Upvotes: 2

Ry-
Ry-

Reputation: 225291

<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)?

Upvotes: 5

Related Questions