CSS :not selector not working as intended - html

Question

I am trying to use the CSS :not selector to select all list elements that do not contain a link. Even though the first element contains a link, for some reason it is still following the CSS rules of the :not selector. Here is the example on CSSDesk: http://www.cssdesk.com/bFrgz
Here is the HTML
<ul>
<li>One</li>
<li>Two</li>
<ul>
Here is the CSS:
li {display: inline; border: 2px solid lightgrey; padding: 15px 20px 15px 20px; background: white;}
li:not(a) {color: white; border: 2px solid lightgrey; padding: 15px 20px 15px 20px; background: light grey;}
Any help would be greatly appreciated

Answer 1

First off, as per the original question, this is not possible. You're trying to both select an LI that is not also an A. No HTML element can be two types of elements like that.
There is also no way using pure CSS to reach inside of an LI, detect it has an A, then traverse back up the tree and apply a style to the LI.
HOWEVER, you COULD set the A to fill the LI with color by converting it to an inline-block level element. Here's what your code would look like, and please note that you were overwriting your background color in one case, and had a space in the 'lightgrey' in the second. I fixed that assuming you wanted your LIs with A tags in in them to have the white background. I used a negative margin to pull the edges back in, and zeroed out the border on the A so that it just uses the LI's border. If you wanted no border at all, then you'd need to remove the border from the LI.:
li a {
display: inline-block;
border: 0px solid lightgrey;
padding: 15px 20px;
background: white;
margin: -15px -20px;
}
li {
display: inline-block;
color: white;
border: 2px solid lightgrey;
padding: 15px 20px;
background: lightgrey;
}
You could also implement a jQuery solution whereas you detect all LIs with an A and apply a class to the LI that you can then style differently:
$('li a').parent().addClass('has-anchor');

Answer 2

Sorry but this can't be done.
You need to rethink the HTML structure because CSS selectors currently don't work with child elements targetting parent.
In this particular case, don't style the LI, style the A as block element, and elements wich don't have links on it, wrap them around a SPAN or DIV, then style them like you did with the anchor:
<ul>
<li>One</li>
<li><span>Two</span></li>
<ul>
CSS:
li {
display: inline;
margin: 0;
padding: 0;
}
li a, li span {
display: block;
border: 2px solid lightgrey;
padding: 15px 20px 15px 20px;
background: lightgrey;
}
li a {
color: red;
}
li span {
color: black;
}

Answer 3

You don't need the :not() selector at all; simply put the text styling for non-anchor elements in the li {} class.
li {
display: inline;
border: 2px solid lightgrey;
padding: 15px 20px 15px 20px;
background: lightgrey;
color: white;
}
<li>One</li>
<li>Two
</li>