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();
});
Related
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>
A particular web editor only allows in-line css and no javascript.
I would like to make a minimal show/hide section:
<div>
<p id="question">What do you call a fish with no eyes</p>
<p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>
Is there any solution? - I.E. compatible.
In short, no.
While it's entirely possible to achieve such a system (for multiple questions and answers) without any JavaScript whatsoever, it's not possible to do it purely inline. This is because you can't target pseudo-elements inline.
And even with you current HTML structure this would still be impossible, as there is no child selector in CSS (though a :has() pseudo-selector has been drafted).
In addition to this, it's also worth noting that inline CSS has a higher level of specificity than stylesheets; a stylesheet rule cannot override inline CSS unless you make use of an !important declaration.
Assuming you are change your HTML, this can be achieved with a combination of the :focus pseudo-selector, the adjacent sibling combinator (+) and the !important declaration, as can be seen in the following:
#question:focus + #answer {
visibility: visible !important;
}
<div>
<a id="question" href="#">What do you call a fish with no eyes</a>
<p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 6 years ago.
I'm using off canvas menu that I've been trying to get work correctly. In order to get my fixed menu and off-canvas to play nicely, I had to take my header out of the off canvas inner wrapper, but now my header won't move over when the menu is opened.
When off canvas is opened, it applies a .is-open-right to the inner wrapper which then has the CSS applied to it.
I'm trying to add this line of CSS to my header ONLY when the .is-right-open class is added to my wrapper.
-webkit-transform: translateX(-450px);
transform: translateX(-450px);
I was trying to target this way:
.is-open-right, .is-open-right > .header {
-webkit-transform: translateX(-$offcanvas-size-large);
transform: translateX(-$offcanvas-size-large);
}
My HTML Looks like this when menu is closed:
<div class="off-canvas-wrapper">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div>
</div>
HTML when Opened
<div class="off-canvas-wrapper">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-right" data-off-canvas-wrapper=""></div>
</div>
Am I able to target my header element only when the next sibling element has the class .is-open-right ?? From what I've read... looks like I might have to go to a JS solution.
There is no 'previous sibling' selector. Your solution should be to make sure you are applying the classes to the parent element.
Your HTML should look like this:
<div class="off-canvas-wrapper is-off-canvas-open is-open-right">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div>
</div>
Another option is to move the header below the off-canvas-wrapper-inner so you can target it as the next sibling (using +).
The current W3 spec draft also includes a :has pseudoselector. When fully supported we can solve this problem with the following selector: .previous-class:has(+ .next-class)
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.
i want to add a style (display:none) to hide a div element with the class "xclass" but only if it contains a link with the href "/somedir/somepage.php" is this doable with CSS or CSS3 selectors?
below is some example code for the div i wish to hide, it could appear anywhere inside a web page.
<div class="xclass">
<div>
<div>
<a href="/somedir/somepage.php">
</div>
</div>
</div>
No, this isn't possible. Due to the way browsers handle CSS selectors, you cannot select a parent element based on its children.
This might be doable with JavaScript. Here's a jQuery snippet:
$('.xclass').each(function() {
if ($(this).has('a[href="/somedir/somepage.php"]')) {
$(this).hide();
}
});