This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Hi!
I'm trying to select a parent node of a specific node (with a specific className) to apply some CSS style to it.
As far as I know, there only exist CSS3 selector operands for child elements, descendant, following nodes etc... So only some "forward" selection in the DOM document is possible. When the selector applies to some section in the DOM document, always the last element the selector describes, is being selected. Am I wrong? I hope so!
How do you select the first <div> element in the following example? Let's say that there may exist a lot of other <div>s containing <p>s and I only want to select the <div>s containing a p.foo but not p.bar. Note that I want to select the <div> rather than the <p>!
<div>
<h1>Test</h1>
<p class="foo">Some text</p>
</div>
<div>
<h1>Test 2</h1>
<p class="bar">Some other text</p>
</div>
Thanks in advance!
Indeed a "parent selector" doesn't exist.
You can see the list of selectors here:
http://www.w3.org/TR/css3-selectors/#selectors
You could give your parent node an id and then select the parent with its id.
Otherwise I don't see any solution to access the div from bottom up using solely CSS.
Related
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
In the following JSFiddle I have an example of attempting to not apply a style on an object that is inside a div with the class .k-grid.
In the given example the following line of code does not work as I expected.
As far as I understand CSS i'm saying: Every P object, that doesn't have the "fancy" class, and are not somewhere inside a div object with a .k-grid.
Since my given p object is inside a div with .k-grid, I dont expect it to turn green.. but it does.
<style>
form.editform div:not(.k-grid) p:not(.fancy) {
color: green;
}
</style>
<form class="editform">
<div>
<div class="k-grid">
<p>I am a paragraph.</p>
<p class="fancy">
<span class="notfancy">I am so very fancy!</span></p>
<div class="fancy">I am NOT a paragraph.</div>
</div>
</div>
</form>
When I change form.editform div:not(.k-grid) p:not(.fancy) to form.editform div:not(.k-grid)>p:not(.fancy) it does properly exclude the p fancy from becoming green.
Can someone explain to me why a space does not work in removing the class from the object, while the > does work? As well as explain what the difference is between "descendents" and "children".
Descendents are children, and descendents of children (e.g. grandchildren, grand-grandchildren, etc). Your <span> is a descendant of <form>, but not a child of it.
In no case is <div class="k-grid"> getting matched to div:not(.k-grid).
Your selector is picking up <form class="editform"> as its form.editform, its descendant (and incidentally a child) <div> for div:not(.k-grid), and its descendant (more precisely, grandchild) <p> for p:not(.fancy). You can check that this is what is going on by changing <div> to e.g. <article>, and seeing the CSS rule stop having an effect.
When you change the last part of your selector to child selector, <p> cannot match because it is a grandchild of <div>.
This question already has answers here:
How do I select the "last child" with a specific class name in CSS? [duplicate]
(6 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
I'm dynamically adding and removing classes to and from elements on specific JS events. What I would like to do is select the last child element that has none these classes with CSS.
Example #1
<container-element>
<h2></h2>
<div class='some-class'></div>
<div></div>
<div></div> <!-- select this div -->
</container-element>
Example #2
<container-element>
<h2></h2>
<div></div>
<div></div> <!-- select this div -->
<div class='some-class'></div>
</container-element>
Is it possible to write a CSS selector to do this?
Something like container-element > div:not(.select):last-of-type?
Per this answer, the solution would technically be container-element > div:nth-last-child(1 of :not(.select)).
However, this of S clause in :nth-last-child is still not supported by any browser other than Safari.
You're saying: select the last sibling that doesn't contain a class attribute.
I don't believe it's possible with currently available CSS.
You're asking a waterfall (the cascade) to run upward. The browser needs to check the last element, then check the ones that came before it. This is not how CSS works.
div:not(.some-class):last-of-type won't work because the browser doesn't move up automatically to the next sibling.
Of course I can do this with JS, but preferred a pure CSS solution. Supposedly a pure CSS solution is not possible, so the next best thing is an CSS solution with a little extra HTML.
The trick was to add a class, not-selected, to all of the elements, then remove this class from the element that you want to target with the CSS selector.
And the CSS selector would be div:not([class*='not-selected']).
div:not([class*='not-selected']) {
background: red;
}
<button type='button'>
<h2>title</h2>
<div class='not-selected'>option one</div>
<div>option two</div>
<div class='not-selected'>option three</div>
</button>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
Using only CSS, is it possible to hide a parent element if a child element does not have a class?
<!-- hide this -->
<div class="parent">
<p class="badChild" />
</div>
<!-- do not hide this -->
<div class="parent">
<p class="goodChild" />
</div>
Unfortunately, I cannot change the markup of the page. I can only add CSS rules.
No, it is impossible to address parent from children with CSS. You should use JavaScript to do so, for example with jQuery .parent() method.
Well you code was wrong <p class="badChild"/> is wrong because <p> is a block element and ends like this <p class="badChild"></p> i have updated the question and coming to your problem there is no method to do this with css only because css allows you to select child, first child, sibling but not the parent element so javascript or jquery is the only option.
If there was a way to do it, it would be in either of the current CSS selectors specs:
Selectors Level 3 Spec
CSS 2.1 Selectors Spec
The Selectors Level 4 Working Draft includes a :has() pseudo-class that works the same as the jQuery implementation. As of 2015, this is not available in any browser.
Using :has() the original question could be solved with this:
li:has(> a.active) { /* styles to apply to the li tag */ }
In the meantime, you'll have to resort to JavaScript if you need to select a parent element.
$(document).ready(function(){
$('.badChild').parent('.parent').hide();
});
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I've got some div elements that show up next to each other.
<div class="parentdiv">
<div class="article-teaser-text2">
some text ...Lees meer
</div>
<div class="article-teaser-image">
<img src="somimage.png" >
</div>
</div>
I want to make the first div wider if the second div doesn't contain a image
is it posible to select the div.article-teaser-text2 if div.article-teaser-image > img
I thought something like:
div.article-teaser-image > img ~ div.article-teaser-text2
but that would select the div.article-teaser-text2 if it was a sibling of img if I'm not mistaken.
I know I can do this is jQuery but I'm looking for a CSS solution
No. The current specs do not have such a selector and for good reason. Consider this analogy.
As humans we inherit the traits of our parents - skin color, eye color, height and a multitude of other phyical attributes. Now we are free to override some or all of these traits but we may never define our parents' trait.
Take this analogy to CSS and understand that children elements should never define the characteristics of the parent.
Applying this strategy there is a solution.
<div class="parentdiv HASimage">
<div class="article-teaser-text2">
some text ...Lees meer
</div>
<div class="article-teaser-image">
<img src="somimage.png" >
</div>
</div>
Notice how I added the class "HASimage". Add a specific class to the parent to differentiate whether or not a child has an image. This can be easily be done with PHP or any server side language. In css then do the following:
.parentdiv .article-teaser-image {
normal traits (without image)
}
.parentdiv.HASiamge .article-teaser-image {
override traits and add extra traits (with image)
}
Hope that pushes you in the right direction.
Regards.
Is there a way to select elements that are not parents of any dom (of the type written as <...>)? I know that individual characters may count as dom, but ignoring that, I want to select the terminal nodes. In the following, <div id=2> would be such element but <div id=1> would not.
<div id=1>
<div id=2>
Hello World
</div>
</div>
Unfortunately, this isn't possible with a CSS selector. You need to find another way around it depending on what you're trying to achieve.
For the record, the :empty pseudo-class won't work here because it only matches an element that doesn't have any text or element children, not even whitespace. Since your second-level div contains text, it is not :empty.