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.
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 "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)
I am trying to define styling for second sibling's child element based of first sibling's class.
Here is an example of what I am trying to achieve
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?
Help much appreciated.
Thanks,
Medha
As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:
HTML
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
CSS
.one.edit + .two .change { color: green; }
If not, you could easily accomplish what you're after with a little JavaScript.
Here You can find answer:
Complex CSS selector for parent of active child
Short answer copied from link:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that
satisfies certain criteria. A more advanced selector scheme (such as
XPath) would enable more sophisticated stylesheets. However, the major
reasons for the CSS Working Group rejecting proposals for parent
selectors are related to browser performance and incremental rendering
issues.
Update:
Now I notice the edit class required in the child. You cannot.
simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.
More here:
CSS selector for "foo that contains bar"?
.
Original:
Depending on which browsers you care about, this may work:
div.one + div.two > div.change {
color: green;
}
Reference:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live Example:
http://jsfiddle.net/Meligy/NVjq6/
I have an app with relatively complex DOM structure with 20+ layers of divs.
If I have a div with class="active" somewhere in the middle of the tree, how can I select it's parent n layers up in the tree using CSS?
For example, how do I select the div marked in uppercase (4 layers up) in the following tree ? :
<DIV>
<div>
<div>
<div>
<div class="active">
</div>
</div>
<div>
</div>
</div>
</div>
</DIV>
Same considering first-child ? How to select a first-child n layers down the tree ?
Unfortunately, there is no such thing as a parent selector. You'll have to set a class on the desired element directly, either by hand, or with some server-side code, or via JavaScript.
Based on this article I found titling CSS4 Preview, it will be possible in CSS4 to style parent elements. The article shows that it would be possible to style parent elements like the following:
$div > div > div > div.active { border: 1px solid #ccc; }
(Given example would style the div nested 3 layers up in the tree related to div.active)
Going back to my app, using PHP and inline CSS, I would be able to control the n (nesting depth).
Until CSS4 though, I will use some kind of jQuery solution.
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.