0

I was wondering if it is possible to select a list item that does not contain any ul's or ol's with pure CSS. Note that the list item will almost always contain an anchor, which is allowed. CSS3 can be used as well. I know how to do this with jQuery, but I'd like to use CSS(3).

Hashem Qolami
  • 88,138
  • 25
  • 132
  • 151
Bram Vanroy
  • 22,919
  • 16
  • 101
  • 195
  • I'm quiet sure that it's not possible to achieve that with pure CSS. Besides, please consider posting relevant code. – Hashem Qolami Oct 13 '14 at 09:51
  • Any code please. I don't know what are you looking for. – Hendry Tanaka Oct 13 '14 at 09:55
  • Post your jquery selector or all code that you used – Fabio Oct 13 '14 at 09:56
  • Will post code soon. Patience, preciousss. (I'm currently in class and my mind drifted off so I immediately posted this from my mobile device. Will add code soon.) – Bram Vanroy Oct 13 '14 at 09:58
  • possible duplicate of [CSS selector for "foo that contains bar"?](http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar) – m90 Oct 13 '14 at 10:01
  • @m90 That is **not** a duplicate. I am looking for foo that does not contain any elements other than a specific one. That is *not* the same. – Bram Vanroy Oct 13 '14 at 10:09
  • @BramVanroy such a comment is also *not* an offence btw. In any case I guess you'll be out of luck here, just as in the other question(s). You do have `:empty` or `:contains`, but that's about all there is, and this won't let you do what you are looking for. – m90 Oct 13 '14 at 10:13
  • I know that is not meant as offensive or whatsoever. I just see too many people grabbing the "duplicate" button, when it isn't an exact duplicate. I might just start a meta about this issue. But I'll just remove this question, as it seems not wanted. – Bram Vanroy Oct 13 '14 at 10:16

2 Answers2

2

First of all, there is (currently) no selector in CSS, to check if an element contains another elment or if it doesn't. (I played a bit around with :not() but it didn't work.)

But there is a trick to do this, the :only-child selector. If you can say that there will always be an <a> tag in your list and no other element than an <ul>, you can do it like this:

HTML

<ul class="list">
    <li><a href="#">Test</a></li>
    <li>
        <a href="#">Test</a>
        <ul>
            <li>Test2</li>
        </ul>
    </li>
</ul>

CSS

.list > li > a:only-child { color: red; }

So you select all <a> tags which are the only child of their parent tag.

This might not be the perfect solution, but will work if you have a structure like my HTML code.

Have a look at my jsfiddle to see the solution: http://jsfiddle.net/2Lxaah61/

Matthias
  • 627
  • 3
  • 8
-1

You can not directly check whether a list contain sub list or not.

But the possible workaround is just to apply CSS class on all li elements:

.list > li { background:gray;}

Now you can override this css with below one:

.list > li:only-child { background:Red;}

Hope this help you!

Ram Kumar
  • 1
  • 3