This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Say I have the following CSS:
<div class="div1">
<div class="div2">
<div class="div3">
<ul class="div4">
<li class="div5">
</li>
</ul>
</div>
</div>
</div>
Is there a way to target, if li.div5 then target .div1 so like change the background of .div1 if li.div5 ?
if($('li.div5').length) {
$(this).parents('.div1')......
}
In pure CSS - No, I'm afraid there is no parent selector.
no, you can't with css only . there's not such selector working as an ancestor selector
CSS cascades, so it only allows selection of children. There are no ascension selectors unless you implement something like jQuery and do it through javascript.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 5 years ago.
I have question about CSS selectors. I have below structure - I can only modiffy CSS - I don't have access to modify html or JS.
<div class="wrapper">
<div>
<div>
<div class="open">
</div>
</div>
</div>
<div>
<div class="top">
</div>
</div>
</div>
Class open will be toggled. Can I make selector when:
div in 4 line has open - div with class top => .top {top:50px}
div in 4 line not has open - div with class top => .top{top:0px;}
This is possible?
Try this:
.wrapper div:not(.open){
...
}
You will need to adjust it to the get the correct DIV, because this will affect all of them inside .wrapper
In your case it looks like you need something like:
.wrapper > div > div > div:not(...){...}
However, that is a bad practice.
You can read some more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
The snippet below is a part of a much larger structure with many .step elements.
I need to match all .stepText elements that are next to .stepTitleAndImages ul.standard
In other words, match all .stepText elements that have .step parent that has .stepTitleAndImages child that has .stepImages.standard child
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages standard"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div> **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?**
<div class="clearer"></div>
</div>
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages medium"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div>
<div class="clearer"></div>
</div>
PS: I cannot modify the HTML. Cannot use anything other than pure CSS.
Just use this for selecting first case
.step:nth-child(1) .stepText {
... Your CSS here
}
For second one use
.step:nth-child(2) .stepText {
... Your CSS here
}
For selecting both use
.step .stepText {
... Your CSS here
}
Then you should require jquery for that
Selecting Parents sibling is not possible only with pure CSS yet, You can achieve this by a single line of jquery:
$('ul.standard').parent().siblings(".stepText").css(...your CSS here);
This cannot be done with your HTML structure and with pure CSS. The closest solution to your problem, changing the HTML structure and with pure CSS, would be to move the standard class to its parent tag:
<div class="stepTitleAndImages standard">
<h3 class="stepTitle"></h3>
<ul class="stepImages"></ul>
<div class="clearer"></div>
</div>
This would allow you to use the adjacent sibling selector (+), which matches the second selector if it's the direct next sibling of the first, like this:
.stepTitleAndImages.standard + .stepText {
/* Styles */
}
A more flexible approach would be to use the general sibling selector which would match any sibling preceded by the first selector, not only the direct next one:
.stepTitleAndImages.standard ~ .stepText {
/* Styles */
}
The :has pseudo-class is in development by Mozilla, but it hasn't hit any stable browsers yet. With it, and with your HTML structure, you could go:
.stepTitleAndImages:has(.standard) + .stepText {
/* Styles */
}
Unfortunately, currently you can't solve this in any other way with CSS (and with your HTML structure) only.
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 7 years ago.
I "need" to target the other sibling of each of two elements (actually children of siblings) on :hover. I can get the code block below to work, but I cannot get it to work in the reverse. I understand there is no designated method of targeting like this: ".element2:hover + .element1", but I did find this (Is there a "previous sibling" CSS selector?) which had some creative solutions including RTL and some tricky :nth-child ideas. However, I still couldn't see a way to go BOTH ways, but rather just switching directions (I need both).
MARKUP:
<div class="element1">Element 1</div>
<div class="element2">
<p class="child">
<span class="grandchild">Element 2</span>
</p>
<p class="child2"></p>
</div>
<div class="element3">Element 3</div>
CSS:
.element1:hover + .element2 .child .grandchild { background-color: red; }
https://jsfiddle.net/macwise/6u3nj18m/
EDIT: I added a third root child element (.element3) to reflect the real-world case I'm working with.
Update: perhaps my language of "previous sibling" was vague and therefore misconstrued as "parent" (Is there a CSS parent selector?). Parent targeting would probably offer a satisfactory solution too, but I am technically needing to target "one sibling of a parent which comes before another sibling of that same parent." It's simpler than it sounds. :) Hope that clears things up.
you could catch hover from parent and trigger it once you hover a child.
then apply bg to all divs, but the one hovered :
body div {
pointer-events: auto;
}
body {
pointer-events: none;
}
body:hover div {
background: red;
}
body:hover div:hover {
background: none;
}
<div class="element1">Element 1</div>
<div class="element2">
<p class="child">
<span class="grandchild">Element 2</span>
</p>
<p class="child2"></p>
</div>
But, this is for the fun only, you should use JavaScript for this.
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 8 years ago.
These two Selectors:
.class>li>a{}
and
.class li a{}
are doing exactly same job for me so can some one please tell me what is the benefit of using > ?
Thanks
It makes the selector more specific.
The first selector only targets an anchor tag that is a child tag of a lst item that is a child tag of a CLASS.
<div class="fo">
<li>
<a>
the second select will target all anchor tags that are a descendant of a list item which is a descendant of a specific class.
<div class="fo">
.....
<li>
.....
<a>
where .... can be any other dom element
With the selector > you focus on the immediate chidlrens
<div class="class">
<ul>
<li>text</li>
</ul>
</div>
With this part of code, the selector .class>li>a{} won't work cause the child of .class is "ul". But .class li a{} will work cause it check all in the selector tree.
<ul class="class">
<li>text</li>
</ul>
Will work with your .class>li>a{} cause they are all immediate children.
Another exemple, if you have this html code
<div id="section">
<span>some text</span>
<div class="subSection">
<span>some text</span>
</div>
</div>
The selector #section>span will apply to the first span only.
The selector #section span will apply to all spans in the id section.
I need a CSS selector that can find the 2nd div of 2 that has the same class. I've looked at nth-child() but it's not what I want since I can't see a way to further clarify what class I want. These 2 divs will be siblings in the document if that helps.
My HTML looks something like this:
<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>
And I want the 2nd div.bar (or the last div.bar would work too).
Selectors can be combined:
.bar:nth-child(2)
means "thing that has class bar" that is also the 2nd child.
My original answer regarding :nth-of-type is simply wrong. Thanks to Paul for pointing this out.
The word "type" there refers only to the "element type" (like div). It turns out that the selectors div.bar:nth-of-type(2) and div:nth-of-type(2).bar mean the same thing. Both select elements that [a] are the second div of their parent, and [b] have class bar.
So the only pure CSS solution left that I'm aware of, if you want to select all elements of a certain selector except the first, is the general sibling selector:
.bar ~ .bar
http://www.w3schools.com/cssref/sel_gen_sibling.asp
My original (wrong) answer follows:
With the arrival of CSS3, there is another option. It may not have been available when the question was first asked:
.bar:nth-of-type(2)
http://www.w3schools.com/cssref/sel_nth-of-type.asp
This selects the second element that satisfies the .bar selector.
If you want the second and last of a specific kind of element (or all of them except the first), the general sibling selector would also work fine:
.bar ~ .bar
http://www.w3schools.com/cssref/sel_gen_sibling.asp
It's shorter. But of course, we don't like to duplicate code, right? :-)
UPDATE: This answer was originally written in 2008 when nth-of-type support was unreliable at best. Today I'd say you could safely use something like .bar:nth-of-type(2), unless you have to support IE8 and older.
Original answer from 2008 follows (Note that I would not recommend this anymore!):
If you can use Prototype JS you can use this code to set some style values, or add another classname:
// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...
(I didn't test this code, and it doesn't check if there actually is a second div present, but something like this should work.)
But if you're generating the html serverside you might just as well add an extra class on the second item...
HTML
<h1> Target Bar Elements </h1>
<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>
CSS
.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}
DEMO
https://jsfiddle.net/ssuryar/6ka13xve/
What exactly is the structure of your HTML?
The previous CSS will work if the HTML is as such:
CSS
.foo:nth-child(2)
HTML
<div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
</div>
But if you have the following HTML it will not work.
<div>
<div class="other"></div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
</div>
Simple put, there is no selector for the getting the index of the matches from the rest of the selector before it.
And for people who are looking for a jQuery compatible answer:
$('.foo:eq(1)').css('color', 'red');
HTML:
<div>
<div class="other"></div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
.parent_class div:first-child + div
I just used the above to find the second div by chaining first-child with the + selector.
Is there a reason that you can't do this via Javascript? My advice would be to target the selectors with a universal rule (.foo) and then parse back over to get the last foo with Javascript and set any additional styling you'll need.
Or as suggested by Stein, just add two classes if you can:
<div class="foo"></div>
<div class="foo last"></div>
.foo {}
.foo.last {}
First you must select the parent element and set :nth-of-type(n) for the parent and then select the element you want. something like this :
#topmenu li:nth-of-type(2) ul.childUl {
This will select the second submenu from topmenu. #topmenu li is the parent element.
HTML:
<ul id="topmenu">
<li>
<ul class="childUl">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul class="childUl">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul class="childUl">
<li></li>
<li></li>
<li></li>
</ul>
</li>