CSS :not selector not working as intended

css selectors
css not child
css parent selector
css not(:first-child)
css child selector
css not(:first-of-type)
css not parent
css not(:last-child)

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><a href="">One</a></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

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');

:not(), The :not(X) property in CSS is a negation pseudo class and accepts a The passed argument may not contain additional selectors or any pseudo-element selectors. selector as our argument it will not produce the expected result. the image shows exactly the two odd elements as being selected. Reply. CSS class selector not working. Ask Question Asked 3 years, 10 months ago. Active 3 years, 10 months ago. Viewed 7k times 2. 1. I am trying to make a custom alert box

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><a href="">One</a></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;
}

CSS :not Selector, Use the :not selector to select every element except those that match the The next one that the CSS Working Group is working on ishint, what comes after� In Chrome emulator works as intended but in any mobile devices it doesn't as expected (tablet or smartphones) I've used @media print and the CSS :not selector in it to apply the style "display: none" to all html elements I don't want to to be printed.

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><a href="">Two</a>
</li>

Selectors, The CSS Working Group is also developing CSS level 2 revision 2 (CSS 2.2). If the universal selector is not the only component of a simple selector, the "*" may be This is primarily intended to allow language subcode matches (e.g., the� Unfortunately the CSS for does not seem to register. I have tried switching the position of the type and the id such as instead of this, #titleImage img that did not work. Is it an issue with me having multiple external CSS references? Also this is not all the code there is more to each but the ones listed below are the parts that I focus on

:not selector not working as expected, jQuery uses css syntax but it is not using css engine to create element collections . Also worthy to note that docs suggest that not() method is� css class selector does not work and do not know why In my project you can click on a region and it's county crest appears at the bottom. my project I have some jquery to hover on the newly added crests and I want to use the selector on their class.

CSS Id selectors not working but Class selectors are working, Quick question about CSS selectors. I can get CSS Id selectors not working but Class selectors are working This styling works as intended Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Complex Selectors, Selectors are one of, if not, the most important parts of CSS. CSS3 brought new selectors, opening a whole new world of opportunities and improvements to existing As expected, these will select odd or even elements respectively. Should� The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

Comments
  • li:not(a) will match every <li> element, by design, since no HTML element can be of two element types.
  • That makes sense, I must be a little confused about how the :not selector works. How would I go about selecting list elements that contain a link?
  • you have background: white; and background: lightgrey in li { }.
  • Maybe I should have been more clear. I want the list items that don't have a link to have a light grey background and list items that do have a link to have a white background
  • Thank you, this is exactly what I was looking for!