In CSS,
Is it possible to match the elements which have a certain property followed by an element which has another property, ie.
Let's consider
<div my-custom-attribute="0">
</div>
<div my-custom-attribute="1">
</div>
I want to select all elements which have my-custom-attribute equal 0 that are followed by elements which have my-custom-attribute equals 1
You can do this in reverse order by attribute selectors
div[my-custom-attribute="0"] > div[my-custom-attribute="1"]
or
<div id="parent">
<div my-custom-attribute="0">
</div>
<div my-custom-attribute="1">
</div>
</div>
#parent > div[my-custom-attribute]:not(:first-child)
I think this is what you want :
div[my-custom-attribute="0"] + div[my-custom-attribute="1"] {
color:red;
}
DEMO
Refer to this link for more info on selectors.
Thank you for your answers. I ended up using jQuery selectors instead of CSS.
For my case, the jQuery prev() worked
$($('div[my-custom-attribute="1"]').prev('div[my-custom-attribute="0"]'))
Related
So basically I've got a setup that spits out the code in the following fashion..
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS"></div>
</div>
<div class="subparent">
<div class="TARGETCLASS"></div>
</div>
</div> //close for the parent class
Now what I'm trying to do is to style "TARGETCLASS" that comes above one way and the "TARGETCLASS" that comes second in another way. I tried n-th child, but unable to achieve the result I'm looking for. There's no way to add additional classes or ID to the existing "TARGETCLASS" class. Otherwise I wouldn't be posting this question :)
Also, the "subparent" class also is same. for both the targetclass classes. That's the issue
Thanks in advance for taking your time to answer this question for me.
Cheers!
Looks like you've got some mal-formed tags in your html. And nth-child should work just fine. Also, make sure you place the nth-child selector on the subparent class, and not TARGETCLASS. It's common to mis-place the child selector. Try this:
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">
first-child
</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">
second-child
</div>
</div>
</div>
<style>
.parent .subparent .TARGETCLASS {
background-color:#f00;
}
.parent .subparent:nth-child(1) .TARGETCLASS {
background-color:#0f0;
}
</style>
fiddle: https://jsfiddle.net/8ejxokuj/
I would use nth-of-type selector like so:
.parent{}
.parent > .subparent {} //targets both subparents
.parent > .subparent:nth-of-type(2) {} //targets the second subparent
.parent > .subparent:nth-of-type(2) > .TARGETCLASS{} //targets the child of the second subparent
The nth-of-type() selector enables you to style a specific element amongst a series, in this case we targeted the second .subparent then specified the child we needed.
I hope this helps!
It seems, it is working by the nth child.
it is about how childrens are called. Not like "Ask parent to find nth child, but ask child, how far is he from parent"
.parent .subparent:nth-child(1) {background: #FEE; color:RED;}
.parent .subparent:nth-child(2) {background: #EEF; color:blue;}
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">aaa</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">bbb</div>
</div>
//close for the parent class
</div>
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.
How am I abled to select the first, second and third span related to layer 1, independent from if it is the first child of a div at layer 2?
<div class="LAYER1">
<div class="LAYER2">
<span>FIRST<span>
</div>
<div class="LAYER2">
<span>SECOND</span>
<span>THIRD</span>
</div>
</div>
By using span:first-child I get FIRST and SECOND but I just want to get FIRST.
EDIT: I'm aiming for making a selection like "get me the first, second and third span children from LAYER1". SECOND and THIRD could be in the first LAYER2 div, too and the solution should not depend on that.
EDIT2: Example at http://jsfiddle.net/3hAEc/3/
Selecting only <span>FIRST</span> works like this (assuming the browser supports it)
.LAYER1 .LAYER2:first-child span {
// ...
}
As you can see here: http://jsfiddle.net/3hAEc/
how about you add ids or classes to them, then select them that way ?
<div class="LAYER1">
<div class="LAYER2">
<span id="first_span">FIRST<span>
</div>
<div class="LAYER2">
<span id="second_span">SECOND</span>
<span id="third_span">THIRD</span>
</div>
</div>
Try this :
.LAYER1 .LAYER2:first-child span:first-child /* first one*/
.LAYER1 .LAYER2+.LAYER2 span:first-child /* second one*/
.LAYER1 .LAYER2+.LAYER2 span:first-child+span /* third one*/
But this is only applicable for the current DOM.
Finally I used the following JS solution by utilizing jQuery:
// for the first span, use 0 and increase for further children
$(".LAYER1").find("span").eq(0);
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 1 year ago.
Unless it's not supposed to but I can't seem to get nth-child to acknowledge the class selector.
I have say 4 divs inside another div, all of various classes and ids. I need to select the first instance of a div with said class. For example:
#content .foo:nth-child(1) { margin-top: 0; }
And obviously again with first-child to get the same affect, but it doesn't affect any of the divs.
Now if I want to force it to work with that div I can do this:
#content .foo:nth-child(3) { margin-top: 0; }
It just so happens that it is the 3rd div in #content, which is pointless because I need to get the 1st instance of anything with that class.
<div id="content">
<div id="action-bar"> </div>
<div id="message"> </div>
<div class="table"> </div>
<div class="clear"> </div>
</div>
Here's a sample of the HTML, I've tried nth-of-type as well like this:
#content .table:nth-of-type(1) { margin: 0 }
Again it only responds when I say nth-of-type(3).
EDIT:
I've set up a working example of the problem I'm having here: http://jsfiddle.net/aHwS8/
Try the :nth-of-type() pseudo-selector instead:
#content .foo:nth-of-type(1) { margin-top: 0; }
Note that :nth-of-type() counts the elements with the same name. So .foo:nth-of-type(1) will not select the first element with the class foo but any first element that is the first in the list of elements grouped by the same name. If you have some document like this:
<div>
<i class="foo">1</i><i>x</i><i class="foo">2</i>
<b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>
.foo:nth-of-type(1) will select the elements <i class="foo">1</i> and <b class="foo">3</b> as both are the first of its own type.
This is an old post but I ended up here seeking for an answer for similar problem. Perhaps this will help someone.
I had the following structure, wanting to select the n-th "foo"-div:
<body>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
</body>
The trick was "go back" and select the parent element with repeated siblings, in this case .container and then select its child(ren):
.container:nth-of-type(3) .foo {
styles here
}
I think you're using the wrong selector, try:
#content .foo:first-of-type { margin-top: 0; }
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>