Say I have
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
I want to select outer-div
.outer-div:has(> .inner-div:has(+ inner-div)) {...}
does not work.
can I nest relative selectors like this anyway?
how best to select a parent with 2 specific children in it?
Thanks!
Oh - nesting cannot be done
The :has() pseudo-class cannot be nested within another :has().
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
#outer-div:has(> .inner-div + .inner-div) works to select "a parent with a child who is a sibling" which is sufficient
Related
I want to select the first child of a parent div, but I have some constraints: the div I want to select has a very general class name, and I don't have access to the markup to give it another class. Since it has such a general class name, if I use first-child, my changes will apply to unrelated elements on the page. It also has a sibling with the same type and class name:
<div class="parent-div">
<div class="extremely-general-class">I want to change this one</div>
<div class="extremely-general-class">And not change this one</div>
</div>
Is there a way to select only the first child of a parent div, but without using first-child? If I use
parent-div > general-class
then it will apply to both sibling divs.
Answer would be nesting, like:
grand-grand-parent-div > grandparent-div > parent-div > general-class:first-child
and so on, as long as the structure does not repeat.
Another idea which came to my mind was using :not() selector, but that's the case only if other divs u don't want to style have something in common that to-be-styled doesn't.
You can select the first child using
general-class:nth-child(1)
that is, as you asked, not using first-child
I would like to know how to select first-child in actual scope, let me give you an example so you could understand my question correctly:
HTML:
<div class="comment commentCompany">
<div class="commentTop"></div>
<div class="commentMiddle">
Text of comment level two comment.
<div class="comment">
<div class="commentTop"></div>
<div class="commentMiddle">
Text of comment level three.
</div>
<div class="commentBottom"></div>
</div>
</div>
<div class="commentBottom"></div>
</div>
CSS that first came to my mind to affect classes commentTop, commentMiddle, commentBottom inside the commentCompany class but only in a direct scope was this:
.commentCompany .commentTop:first-child{/*affect company's .commentTop*/}
.commentCompany .commentMiddle:first-child{/*affect company's .commentMiddle*/}
.commentCompany .commentBottom:first-child{/*affect company's .commentBottom*/}
But there are two problems: :first-child is more like first class's element's type(not really a first-child of class) (would have to use nth-child), and the main problem : it affects also the nested comment - which is not company's comment - so how to get only the direct scope of commentCompany?
I would like to know CSS2 && CSS3 solution if there is any difference. Thanks! :)
You want the child combinator >, not the :first-child or :nth-child() pseudo-classes:
.commentCompany > .commentTop
.commentCompany > .commentMiddle
.commentCompany > .commentBottom
This only selects .commentTop, .commentMiddle and .commentBottom that are directly nested within .commentCompany (within your so-called "actual scope"). See this answer for an illustration.
Using the space, the descendant combinator, means you're trying to get every first child of its parent that is nested within .commentCompany. Combine that with your class selectors and you get all kinds of unexpected results.
The child combinator is part of CSS2; there is no CSS3-only solution.
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/
The HTML looks like this:
<div id="content_wide">
<div class="photo-center borderless"><img src="http://example.com/travel-path-map.png" alt="" title="" /></div>
...but for some reason I can't seem to target the photo-center div like this:
#content_wide + .photo-center { margin-top:10px }
Interestingly enough, a more general child selector works:
#content_wide > .photo-center { margin-top:10px }
Thoughts?
The div with the class photo-center is inside the div with the id content_wide so the child selector (>) works. The adjacent selector (+) would only work if they were next to each other, similar to this:
<div id="content_wide"><!-- content --></div>
<div class="photo-center borderless"><!-- more content --></iv>
In your posted code, .photo-center is a child of #content_wide, not a sibling.
The + is a sibling selector and the > is a child selector.
The sibling selector isn't working because the elements aren't siblings.
You can't use + because .photo-center is not an adjacent sibling of #content_wide, it's a direct descendant (a child), so you can use the child selector >.
According to the Mozilla docs for adjacent sibling selectors:
The + combinator separates two
selectors and matches the second
element only if it is immediately
following the first.
The child selector documentation says:
The > combinator separates two
selectors and matches the second
element only if it is a direct child
of the first.
Here is a jsFiddle demo of the above selectors, http://jsfiddle.net/YcHKm/1/
That's because .photo-center isn't adjacent to content_wide. It is a child of content_wide.
Here is an example of adjacent tags:
<h1>Test</h1>
<h2>Test</h2>
In this example, h2 is adjacent to h1. This way, the + selector should work.
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.