Select inner HTML item in CSS

Question

How can I use CSS selectors to apply a style only to the inner item in a list. Example:

HTML fragment:

<ul class="list">
  <li>Item 1</li>
  <li>
    <ul class="list">
      <li>Subitem 1</li>
      <li>Subitem 2</li>
      <li>
        <ul class="list">
          <li>Subitem 1.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS fragment:

ul.list {
  border: 1px solid red;
}

What I need is to have a border only arround the "Subitem 1.1" string. The list is generated and it's not possible to add an extra class or id and as the list has no fixed depth it's not an option to specify an "ul > ul > ul.list" or similar selector.

How is Subitem 1 distinguishable from Subitem 1.1? Since the depth is not fixed how do you know which item needs that CSS applied? — Atanas Korchev, Mar 03 '11 at 12:21
This would be really easy if either you applied an extra class, CSS had parent combinators/pseudo-classes or nth-level descendant pseudo-classes, or `:not()` supported more than just simple selectors. — BoltClock, Mar 03 '11 at 12:36
If the list has no fixed depth, do you want to select the last `ul` in the tree? e.g. it could just as easily be 1 level deep or 4? — roryf, Mar 03 '11 at 12:41
The problem with this is that these lists are generated by PHP and JS is not an option due the requirements says it must work also with script disabled. Last option is modify PHP function (really ugly task) or use JS. Thanks in any case — Ivan, Mar 03 '11 at 15:26

score 1 · Answer 1 · answered Mar 03 '11 at 12:18

1

it's not an option to specify an "ul > ul > ul.list" or similar selector.

Why not? This, or adding a class, is the solution.

You've basically specified a requirement to identify an element, then rejected all the approaches that you could use to do so.

answered Mar 03 '11 at 12:18

Lightness Races in Orbit

378,754
76
643
1,055

Well, I'm looking for something like :first-child pseudo-class that I've missed... :deepest-node perhaps? :) – Ivan Mar 03 '11 at 12:23
1

There aren't any selectors I know that target the deepest descendants, only the immediate ones (`>`) – BoltClock Mar 03 '11 at 12:28

score 1 · Accepted Answer · answered Mar 03 '11 at 13:07

I believe you cannot do this with only CSS if it is not possible to use an Id or unique class. In this case I think jQuery is the way to go:

$("li").children().eq( $("li").children().length - 1 ).
  css('border', '1px solid red');

The idea is to use eq() to pinpoint the deepest child.

Hope this helps

score 0 · Answer 3 · answered Mar 03 '11 at 12:44

<html>
<head>
<style type="text/css">
li.list {
  border: 1px solid red;
}

</style>
</head>

<body>
<ul >
  <li>Item 1</li>
  <li>
    <ul >
      <li>Subitem 1</li>
      <li>Subitem 2</li>
      <li>
        <ul >
          <li class="list">Subitem 1.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

</body>
</html>

I Hope This ma help you..

score 0 · Answer 4 · answered Mar 03 '11 at 14:20

0

JoseSantos is correct in that it can't be done with pure CSS. Here's how I'd do it in jQuery:

$("ul").each(function(){
    if ($(this).find("ul").length == 0)
        $(this).addClass("list");
});

answered Mar 03 '11 at 14:20

Graham

3,217
1
27
29

Select inner HTML item in CSS

4 Answers4

Linked