CODEWITHSUNDEEP
csscss-selectors
Weblurk
Weblurk

Reputation: 6822

How do I select certain siblings via CSS?

<div class="wrapper">

  <script></script>
  <script></script>

  <ul class="cars">
      <li class="headline">My Cars</li>
      <li>Ferrari</li>
      <li>Hummer</li>
  </ul>

  <noscript></noscript>
  <script></script>
  <script></script>

  <ul class="cars">
      <li class="headline">My Cars</li>
      <li>Volvo</li>
      <li>Caddilac</li>
   </ul>

  <noscript></noscript>
  <script></script>
  <script></script>

  <ul> etc....

</div>

Question: How can I hide ALL the <li class="headline">My Cars</li> elements, except the first one, using only CSS?

I asked a slightly similiar question yesterday which the answer for worked fine, but the scenario has changed which caused further problems. I'm in a position where I have only control over the CSS so please do not suggest using JavaScript or modifying the HTML.

It's those damned <script> and <noscript> elements which causes the solution from yesterday to totally fail.

For browser compatibility I would appreciate if the solution did NOT use CSS3.

Any ideas?

Upvotes: 1

Views: 269

Answers (3)

thirtydot
thirtydot

Reputation: 228302

With your exact HTML structure (not having a <noscript> above the first set of <script> elements) this will work:

.wrapper > noscript + script + script + .cars > .headline {
    display: none
}

I very much dislike it though, because it's too fragile. I'd rather use JavaScript than that abomination.

See: http://jsfiddle.net/davT8/

This will work in IE7+ and modern browsers.

Upvotes: 3

BoltClock
BoltClock

Reputation: 724472

It's probably not feasible using CSS2 unless you could modify your HTML somehow, e.g. to include a first class to your first ul. Without being able to touch your HTML, there isn't a CSS2 selector I can come up with.

But if the answer to both of these questions is yes:

  1. Are all your li.headlines only going to be in ul elements?

  2. Is your div.wrapper only going to contain either script, noscript or ul elements as children?

Then it's easy with CSS3 selectors:

.wrapper > ul:first-of-type ~ ul li.headline {
    display: none;
}

Upvotes: 4

invalidsyntax
invalidsyntax

Reputation: 650

li.headline {
    display: none;
}

It is compatible in all standard browsers (see compatibility here: http://www.quirksmode.org/css/display.html )

Upvotes: 0

Related Questions