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
How to Customize the HTML5 Input Range Type Looks Using CSS
Align Button at the Bottom of Div Using CSS
How to Change Font-Color for Disabled Input
How Is "Grid-Template-Rows: Auto Auto 1Fr Auto" Interpreted
For What Reason Margin Collapse Rules Were Introduced in CSS
:Empty Selector for Parent Element
How to Use Vh Minus Pixels in a CSS Calc()
Width and Height Doesn't Seem to Work on :Before Pseudo-Element
Accessing an Array Key in SASS
Apply CSS Rules If Browser Is Ie
How to Rotate Text Left 90 Degree and Cell Size Is Adjusted According to Text in HTML
Where Do CSS and JavaScript Files Go in a Maven Web App Project
Do I Not Understand the Flex-Grow Property
Change Bootstrap Carousel Fade Transition
Delay Mouseout/Hover with CSS3 Transitions
How to Style a Specific Word with CSS in an HTML Element
Targeting Position:Sticky Elements That Are Currently in a 'Stuck' State
How to Include the Background-Cover Value in the Shorthand Background Property