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; }
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last month.
Good day all,
I have an a tag with class "WORKSHEET_block" and which is contained in 3 other div.
The css to style is (which does not work):
.WORKSHEET_block < .fc-daygrid-event-harness < .fc-daygrid-day-events < .fc-daygrid-day-frame {
background-color: green !important;
}
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a class="WORKSHEET_block">My Value</a>
</div>
</div>
</div>
I know if it was the other way around from parent to child we would use ">" from the parent to the child.
Is there anywhere I can select the parent from the child?
.fc-daygrid-day-frame:has(.WORKSHEET_block) {
background-color: green;
}
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a class="WORKSHEET_block">This is the child using the class</a>
</div>
</div>
</div>
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a>this child does not have any class</a>
</div>
</div>
</div>
Using :has relative selector. I have inserted an extra HTML code it doesn't have a WORKSHEET_block class, so the style is not applying to it
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
i am trying to bind style in my css style using below format but its not working and i am learner for web development can some one help me please what is mistack?
css
.block-header.row.sample h1{
color: aqua;
}
html
<div class="block-header">
<div class="row sample">
<div class="col-sm-6">
<h1 class="page-title">Pending Approvals</h1>
</div>
</div>
</div>
The problem in your rule is that there are no spaces between your classes, which makes the selector any h1 element with the parent having classes block-header, row, and sample.
You would need to put spaces so that the selector knows these elements are nested inside each other:
.block-header .row.sample h1 {
color: aqua;
}
Learn more about how these selectors work from this FreeCodeCamp guide.
Your style rule is wrong, it should be: .block-header .row.sample h1 instead of .block-header.row.sample h1. When you have a style for an element that's a descendant of another one (in your case .row.sample is a child of .block-header) you should have the parent first, followed by a space (or > if it's a direct child) and then the descendant element, just like you're doing with the h1...
You can see it works with that simple change:
.block-header .row.sample h1{
color: aqua;
}
<div class="block-header">
<div class="row sample">
<div class="col-sm-6">
<h1 class="page-title">Pending Approvals</h1>
</div>
</div>
</div>
You can read more about selectors in mdn.
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>
I have these codes
<div class="test">
<div class="tag1"></div>
<div class="tag1"></div>
<div class="tag1"></div>
<div class="tag2"></div>
<div class="tag2"></div>
<div class="tag2"></div>
</div>
Now I want to get second child of .tag2 selector.
I try this code and it's not working, but when I use .tag1 it's working.
.test .tag2:nth-child(2) {
background-color: #000;
}
How can i fix this?
:nth-child works on elements, not on other selectors. Here your .tag2 element is the 4th element in the list.
When browsers begin to implement the Selectors Level 4 standards we'll be able to achieve this using the :nth-match structural pseudo-class selector, but unfortunately that's quite a way off yet.
A Potential CSS Solution (Markup-dependant)
If your markup will always be that the first .tag2 will only ever follow .tag1 and the second .tag2 will only ever follow .tag2, you can fake it with this:
.tag1 + .tag2 + .tag2 {
background-color: #000;
}
This selects the .tag2 element which immediately follows a .tag2 element which immediately follows a .tag1 element.
A JavaScript Solution
If you can't do that then you'll have to go for a JavaScript solution instead (or implement something on the back-end which generates the content).
The below example pulls all .tag2 elements within your .test container, then grabs the 2nd one ([1] here, remember the 0 index: [1] = 2nd), then applies the style to that element.
You'll need to add in some checks to ensure this element exists before applying the style.
document.querySelector('.test').querySelectorAll('.tag2')[1].style.background = '#000'
<div class="test">
<div class="tag1">tag1</div>
<div class="tag1">tag1</div>
<div class="tag1">tag1</div>
<div class="tag2">tag2</div>
<div class="tag2">tag2</div>
<div class="tag2">tag2</div>
</div>
I know your question isn't tagged with JavaScript, but a good solution with JS is as follows:
var alltagtwos = document.getElementsByClassName("tag2");
alltagtwos[1].className += " secondel";
.tag2.secondel {
background-color: #000;
color: #fff;
}
<div class="test">
<div class="tag1">tag1 - 1</div>
<div class="tag1">tag1 - 2</div>
<div class="tag1">tag1 - 3</div>
<div class="tag2">tag2 - 1</div>
<div class="tag2">tag2 - 2</div>
<div class="tag2">tag2 - 3</div>
</div>
What I've done here is add all elements with the class .tag2 into an array-like object using getElementsByClassName. I then select the second element which has the class .tag2 (index starts at zero, so I've select [1]) and appended another class to it (.secondel) which I've then styled with CSS.
I have a problem with CSS :nth-of-type selector. In my code I have a list of DIVs (class "item") that should have an alternating background-color (eg. red and green). Between these items there can be some other items (class "noitem") that should not be matched from the background-color.
Problem is now, that the :nth-of-type rule breaks on every of these non-matching elements. that causes that you have one red item after the other...
Example HTML Code:
<div class="row">
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
<div class="noitem"><h2>No Item</h2></div>
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
<div class="noitem"><h2>No Item</h2></div>
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
</div>
CSS:
h2{
font-size: 14px;
margin: 0 0 10px 0;
padding: 0;
}
.row .item:nth-of-type(even) h2{
background-color: red;
}
.row .item:nth-of-type(odd) h2{
background-color: green;
}
Can anybody help? Running example of that can be found here: http://jsfiddle.net/5qnjshg7/
The type in nth-of-type refers to the type of element (tag name, such as div). It does not mean "nth-of-something-with-exactly-the-same-classes", or "nth-of-the-selector-I-specified", which does not exist in CSS.
In other words, .item:nth-of-type(even) does not mean "an even-numbered entry in the list of all child elements with class .item", but rather, "an element with class .item which also is in an even-numbered position in the list of all child elements of that type (div in this case), regardless of their class or anything else".
One possible approach if you're stuck with the existing HTML
If you can generate different HTML, including for example new classes, or replacing the div on noitem elements with spans, as one answer suggested, then that is the best solution. In case you are not able to do or don't want to do that, and need to work with the existing HTML for whatever reason, this bit of JS will do the job:
var elts = document.querySelectorAll('div.item');
for (var i = 0; i < elts.length; i++) {
elts[i].classList.add(i % 2 ? 'red' : 'green');
}
Seems impossible with CSS, unless you can change your markup and make noitem elements <span>s?
<div class="row">
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
<span class="noitem"><h2>No Item</h2></span>
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
<span class="noitem"><h2>No Item</h2></span>
<div class="item"><h2>Item</h2></div>
<div class="item"><h2>Item</h2></div>
</div>
nth-of-type matches the element to its parent, so although it is not the same selector, it is in fact the correct index relevant to its parent.