Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS *:not(div p) does not select anything

I have the following a HTML code:

<div>
    <p> linux version</p>
    <h1> new tool </h1>

And some CSS for it that should select <h1> but does not select anything.

*:not(div p) {
    font-family: sans-serif;
}

The following does not work too:

*:not(div>p) {}

I have so many such <div> <p> in the HTML whereas the following selects and apply the font:

div p {
    font-family: sans-serif;
}
like image 232
Santhosh Avatar asked Dec 25 '13 09:12

Santhosh


People also ask

How do you select non classes in CSS?

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

How do you select a specific P element in CSS?

You can use nth-of-type selector to select second p element. By using #testing in the selector, you're only targeting the elements that are inside of the #testing element. So, you don't have to worry about the p elements elsewhere.

How do you select all p elements inside a div element in CSS?

Use the element element selector to select all elements inside another element.

What does div p CSS selector do?

[div > p] selects only the p that are children of the div. So if you had a div with lists or whatever inside that had their own p, their properties would not be affected by this selector. [div p] selects all descendant p in the div. So any p that is inside, or descendant, of a div would be affected.


2 Answers

<div>
    <p> linux version</p>
    <h1> new tool </h1>`
</div>

Now consider the following CSS code-

*:not(div p) {
    font-family: sans-serif;
}

This code selects all elements except the <p> inside <div>. So a <div> is also selected by the selector *:not(div p) and hence all the contents of the <div> gets the style: font-family: sans-serif. So the text in the <p> element in the <div> also gets the style.

N.B. You should keep track so that two CSS declaration don't contradict each other. Then if such contradiction arises the declaration that applies some style wins over the declaration that forbids that style to be applied on that element.

Hence the following code will run fine

div>:not(p)
{
    font-family: sans-serif;
}

This selector will select the elements inside a <div> except <p>-elements. So you may use this instead.

like image 44
Rajesh Paul Avatar answered Oct 06 '22 00:10

Rajesh Paul


As others have stated in the comments: the usage of the not selector is like this:

E:not(s) - an E element that does not match simple selector s

where

A simple selector is either a type selector, universal selector, 
attribute selector, class selector, ID selector, or pseudo-class. 

So if you want you code to work you'll have to add a class to the <p> elements which you don't want styled with that font-family.

*:not(.classname) {
    font-family: sans-serif;
}

Alternatively: If you need to apply a font to all your elements - it is generally done by setting it in the body element, then the other elements in the document inherit that rule.

Then you can style your <p> elements within the div differently.

body
{
   font-family: sans-serif;
}

div p
{
  /* the special font-family that you need for paragraphs within a div */
}
like image 153
Danield Avatar answered Oct 05 '22 23:10

Danield