All geek questions in one place

How to select an element in CSS (using an attribute) that is NOT a descendant of another element

After reading the CSS2.1 and CSS3 selector specs again, I suspect this is not possible, but you never know.

If I can select a p-element, i.e. decendent of another p-element using a selector with CSS extension, like this:

pp {};

Is there a way to nullify the seatpost selector and still select the type, so I can select p elements other than those that are divisions of other p elements ...

 p & ( p ! p ) {...};

i.e. I want to select elements of type p, but NOT if they are divided by other elements of type p.

BTW: I use this in querySelector () and querySelectorAll (), where each one is selected with tag type attributes, but I wanted to show the simplest example ...

I tried this without success (syntax error!)

 p:not(pp) {......}
+4
source share
3 answers

You suspect that it is right, it is impossible. :not(s) indicates that s should be a simple selector.

The closest thing you can do is apply the style to all p and then override it for pp .

+3
source 
 *:not(h1) p { ... }

This is called negation pseudo-class , and you can find more information about it here .

By the way, this is CSS3, so you cannot use it with IE versions prior to 8.

+3
source

Although the :not(...) selector is CSS3 only, I usually use it for compatibility with CSS2:

 p { color: #abc; border: ... ; ... } h1 > p { color: inherit; border: inherit; ... }

If your <p> has a common ancestor, i.e. your html looks like this:

 <body> <p> ... </p> <p> <p> ... </p> <p> ... </p> </p> </body>

you can use the "direct-child" selector:

 body > p { ... }

Or, of course, resetting all properties using something like:

 pp { color: inherit; background: inherit; ... }

will work too.

+1
source

Source: https://habr.com/ru/post/1386527/

More articles:


All Articles