CSS Selector for Not a Child of Element Type

CSS Selector for not a child of element type?

:not does not support combinator selectors.

If we're talking about its direct parent:

:not(a) > code

Otherwise there's no way to do this in CSS. You'll have to override it:

code {
/* some styles */
}

a code {
/* override previous styles */
}

Is it possible to select elements that do not have a child of a certain type?

There is a spec, currently in draft, for a :has() pseudo-class. No browser supports it yet. If the spec is someday approved and implemented, you'd be able to do this:

a:not(:has(img)) {
// Styles
}

The MDN page says that :has would never work in stylesheets, only in JavaScript; but in saying that, it links to a section of the spec about a "dynamic selector profile" that apparently no longer exists.

I think the browser vendors typically have a problem with implementing CSS features that require knowledge of the DOM that only exists after the selected element is created, so I don't know if we should get our hopes up for this. Someone who follows the mailing lists or is generally smarter than me might offer a better prognosis.

CSS select an element with no certain child element

css :not() not supported to select except "has element" but you can do it with jQuery

$('p').not(":has(img)").css('background-color', 'yellow')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><p>aa</p><p>aa</p><p>img<img src="" /></p><p>aa</p>

Selector for not immediate child element

You could use the following selector:

.main > * .text

Which will select all .text elements that are descendants of .main, but not immediate children.

How can I select all children of an element except the last child?

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:

:not(:last-child) { /* styles */ }

not:first-child selector

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

div ul:not(:first-child) {
background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

div ul {
background-color: #900; /* applies to every ul */
}

div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.

how can i use the css .not() on a element and its children

CSS selector for all DIV elements except #header:

div:not(#header) { }

CSS selector for its children

div:not(#header) > * { }

or for all its descendants

div:not(#header) * { }

Edit

CSS selector for all DIV elements that are body childs except div#header

body > div:not(#header)


Related Topics



Leave a reply



Submit