CODEWITHSUNDEEP
htmlcsscss-selectors
Ivan
Ivan

Reputation: 15942

Select inner HTML item in CSS

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.

Upvotes: 2

Views: 3649

Answers (4)

GHP
GHP

Reputation: 3231

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");
});

Upvotes: 0

Jose Rui Santos
Jose Rui Santos

Reputation: 15329

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

Upvotes: 1

Rudrik
Rudrik

Reputation: 832

<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..

Upvotes: 0

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385385

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.

Upvotes: 1

Related Questions