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)
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>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I have a number of DIVs on the page with class="row". I need a selector for one that had a child div with id="test".
<div class="row">
<div class="col col-12">
<div id="test">
This is a test
</div>
</div>
</div>
How do I select that particular row?
div.row div#test
did not work for me.
I tried accessing it using
$('div.row div#test ').show();
but nothing happened.
$('div.row').has('div#test').show()
With $('div.row') you get the row's divs. The method 'has('div#test')` applies a filter on these elements but still returns the row divs. See jQuery.has()
Here is an example: jsFiddle
Maybe this works for you?
$('#test').parent().parent()
You would only need to specify..... #test
You can use jQuery .find helper to let it work with one or multiple same ids:
$('div.row').find('div#test').show();
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:
How can I select the last element with a specific class, not last child inside of parent?
(8 answers)
Closed 8 years ago.
I'm trying to target the div with class "text" inside the last div with class "done".
For example:
<div class="installSteps">
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Prep</div>
</div>
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Check</div> < trying to target this
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Configure</div>
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Go!</div>
</div>
</div>
I tried all kinds of combinations of last-child and last-of-type to no avail. I really thought this would work:
.installSteps .done:last-child .text
Any way to do it?
EDIT: Adding some additional details...
The "done" class replaces the "upcoming" class as the processes complete. So it starts with all "upcoming" and then the first one gets "done" then the second one also has "done", then the third, then the fourth... (so I can't target a specific nth child)
So Im looking for a way of targeting the last instance of "done" wherever that may be...
Sorry for not specifying this earlier. i wish I could add an additional class but for now I am unable to...
Provided the hierarchy doesn't change, this works for me:
.installSteps div:nth-child(2) :last-child {
color:red;
}
jsFiddle example
If the hierarchy will change, then you're probably going to have to use JavaScript as you can't target classes of elements with CSS pseudo-classes, only elements.
You could do this
.installSteps .done:not(:first-child) .text {
color: red;
}
Will affect anything after first one.
JS Fiddle Demo
Try nth-child() applied to the .done class.
Example
.done:nth-child(2) .text{
background:red;
}
DEMO
http://jsfiddle.net/a_incarnati/ntzj5wte/
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.