This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 6 years ago.
I have several divs generated by php which contain childs with the class .child (amongst others div with different classes).
Here is a simplified sample of what it looks like :
<div class="container">
<div class="child"></div>
<div class="other-class"></div>
<div class="child"></div>
<div class="child"></div>
<div class="other-class"></div>
</div>
<div class="container">
<div class="other-class"></div>
<div class="child"></div>
<div class="other-class"></div>
<div class="child"></div>
<div class="child"></div>
<div class="other-class"></div>
</div>
I would like to target the last div with the class .child of every .container in my page in order to modify to its margins and a few other tweaks.
Since it is generated by php, I can't predict where the divs with the class .child will appear nor how many of them will be generated. It depends on the data in my sql database.
Also, a user can add a new div with the class .child at the bottom of .container through ajax, and in this case the css would no longer target the current last .child but the new one generated by the user.
I've tried several of things with css (last-child, last-of-type... etc) but I couldn't successfully target my divs.
This thread is a duplicate (I've consulted many others) but they are all 4+ years old and mostly bring jquery alternatives.
Is there anything new to actually do this with css ?
Have you tried this?
.container .child:last-child
try to this:
.container > div:last-child { }
Related
I use Tailwind CSS, I attach an image of my project. Here I try to break the row.
I explain I would like that whatever the size of the cards of the first row, those of the second row comes to be put directly below.
If I understood correctly I have to assign classes to the children but the children are from a database and so they all have the same model component. I tried the row-auto class, but it doesn't work.
Finally I found a simple and effective solution, I share it with you if other people would be in the same use case as me.
I use Css attribute : columns-count on the parent (columns-{nb-col} in Tailwind)
and on the child i use 'break-inside' wit the value 'avoid-column'to avoid that a card overflows on another column (break-inside-avoid-column in Tailwind)
Example :
Html :
<div class="csscolumn">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
CSS:
.csscolumn {
column-count: 3;
}
.child {
break-inside: avoid-colum
}
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
I am trying to select every fourth element and apply 0 margin to it.
I have this:
.products .item:not(.inactive):nth-child(4n) {
margin-right: 0;
}
I want to select every 4th element of type div.item but not .inactive
There I have two problems:
Problem 1
If I add any div element (even if it's not of type .item) then it includes it in counting eg.
<div class="products">
<div class="anything"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div> // <- this is where the margin-right: 0 happens
<div class="item"></div> // <- it should happen here
</div>
Problem 2
If I add .inactive class (using jquery) (which basically hides the .inactive element), the counting as above still happens - so all items within .products div are taken into account and margin-right: 0 is applied to fourth element regardless it's item, item inactive, anything etc.
Problem 1: Using nth-child with arbitary selectors doesn't work
Problem 2: This is the same reason as the first one; but being as you mentioned that you were using jQuery to add the inactive class, you can use jQuery to solve your nth-child issue, by instead using .eq()
$('.products').find('.item:not(.inactive)').eq(3) // Array like, so starts at 0
.css('margin-right', '0')
.css('background-color', 'red'); // Just for demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="products">
<div class="anything">a</div>
<div class="anything">b</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div> <!-- this is where the margin-right: 0 happens -->
<div class="item">4</div> <!-- it should happen here </div> -->
</div>
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 a container div, inside which I want to pack a variable number of divs of unknown (variable) height but with a given min-width. My requirements are:
If the container is wide enough to accommodate two columns, I want them to distribute themselves nicely in two columns without unnecessary whitespace.
It not, they should just go above each other.
Currently, I've given the divs width:48% margin-right:2%;float:left; which works nicely in the one-column state but when I resize the browser window, making room for two columns, every div which ends up in the left column insists on aligning itself horizontally with the bottom of the last div which went to the right:
what I have http://img602.imageshack.us/img602/5719/whatihave.png
This is how I would like them to go (no wasted space):
what I want http://img96.imageshack.us/img96/6985/whatiwantu.png
I would like a pure CSS solution if possible.
Thank you! /Gustav
EDIT:
This markup illustrates my problem:
<html>
<head>
<style type="text/css">
.box {
width: 48%;
min-width:550px;
margin-right:2%;
margin-bottom: 1.5em;
background:blue;
color:white;
height:180px;
float:left;
}
.tall {
height: 250px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box tall">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div style="clear:both"/>
</body>
</html>
The .boxes are generated dynamically, and so are their heights, I just threw in one taller to illustrate.
I don't think you can achieve the desired effect with pure CSS. I've used jQuery Masonry to replicate the effect you're after and it worked really well.
I'd love to see a pure CSS solution for this but haven't seen anything come close yet.
I believe that if you have a div for each column into which you put the numbered divs you will get what you want. Something like this:
<div class="containerDiv">
<div class="column">
<div class="content">
1
</div>
<div class="content">
4
</div>
</div>
<div class="column">
<div class="content">
2
</div>
<div class="content">
3
</div>
</div>
</div>
The next step appears to be "how do I balance my columns". Some code somewhere is generating the boxes you mentioned. It is deciding on the height of each box. This code will need to generate a balanced list of boxes for each column prior to forwarding the request to the JSP for presentation. By balanced, I mean "the height of column1 is similar to the height to column2"
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; }