I have a container and some rows. I give them margin-top with the * + * selector which works fine:
> * + * {
margin-top: 1em;
}
The Problem ist when I have columns inside this rows - how do I dynamically detect the last "row" of columns (kitten images) in my example with only css to delete their margin-bottom? I don't think there is a proper solution but maybe someone could tell me an alternative way to do this. Here is the pen:
http://codepen.io/herrfischer/pen/xOwmWZ
(Bootstrap grid).
Your lobotomized owl do not act on kittens margin because of >.
Just replace margin-bottom with margin-top and add
*:nth-child(-n+4){
margin-top:0;
}
to remove margin-top from first 4 elements.
Example
Also I changed 1em with 2em to keep vertical / horizontal margins equal.
Related
I am trying to implement a col with 3 elements inline : 2 buttons and one select
I managed to get it to work with three buttons, but if I remove a button and add a select for some unknown reason it doesn't work.
3 buttons working and properly aligned:
If we click on Tab2, all three items appear messed up:
What I've tried so far:
I thought it was a form-select width problem, it was set to 100% so I did:
.form-select {
width: unset;
}
But still the three elements are misaligned and not inline.
How can I get those three elements inline?
LIVE JSFIDDLE DEMO
The reason your select keeps going to the next line is because the .form-select class by default has a display type of block
To fix your problem, you are correct in thinking that you should use width: unset, however you must also set display: inline-block to prevent it from going to the next line.
The following CSS should be added:
.form-select {
width: unset; /* note: width: auto; would also work here */
display: inline-block;
}
Working example: https://jsfiddle.net/bem0ojry/
Note that this will only make the 3 elements side by side if there is enough space, otherwise they will automatically wrap to the next line.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
I have a WordPress website with a custom post type that I need to display in a Bootstrap grid.
Here's what I mean :
I need to create a gutter in the center, but obviously if I add a padding-left, it moves every element. I only need to add padding to the item on the right. Since the content is dynamic, I can't just add a class and type
.right-elements { padding-left: 10px; }
Is there a CSS property for even elements or something ?
( since the issue is not really unique I don't feel like I should add the code, but tell me if you need it )
Thanks !
If you're only interested in modifying even elements, you can use the :nth-child() rule:
.my-class:nth-child(even) { padding-left: 10px; }
I have the following styles defined for two divs inside a containing div. I want to float the first inner div left and the second inner div right. I also want to make them margin left or margin right respectively by 15px. The problem is I want to keep my 'float left/float right' styles clean of the margin specification.
I want to be able to specify the class and add to it like so:
#termsPageButtonContainerCheckbox.leftAlignedControl {
margin-left: 15px;
}
The problem is, the margin-left will only be respected when i place it in the float style:
.leftAlignedControl {
float: left;
}
Here is a demo i set up on JSFiddle: [Removed by OP]
You are not targeting the id correctly. You either need to change the HTML id to termsPageButtonContainerCheckbox or change the CSS to #termsPageForm:termsPageButtonContainerCheckbox
http://jsfiddle.net/c5or4hjg/1/
The button has 2 ID's, but only its only possible to give it one id and its not possible to use : in an id for as fas as i know. So it will work if you remove one of the 2 parts used (the one before or after :)
Please have a look at http://jsfiddle.net/kV7Uq/1/
.productList div.grid:nth-child(4n+5){
clear:left;
}
What I'm trying to achieve is to create a 4 column grid. The above code used in the fiddle seems to be just fine - but if you look at that fiddle there is no 4 column grid.
<div class="pageNav"></div>
<div class="pageHeading"></div>
The above two divs that are also child divs of the container div, and located prior to the grid divs are causing a conflict. If those two divs are removed, the grid comes out just fine. I'm not sure if this is even fixable, please help - thank you.
Just offset it by 2 to compensate for those divs. Instead of +5, use +3.
.productList div.grid:nth-child(4n+3){
clear:left;
}
http://jsfiddle.net/kV7Uq/2/
If you don't want the very first box to have the clear: left then it would be +7.
I understand this may be impossible with pure CSS but... how can I select just the nth row of from a set of elements - when these elements are in a flexible width container and the elements themselves are inline-block;
Examples:
A container of 10 elements, each 50px wide, and the container is 200px wide - the selector would grab elements 1 thru 4 (element 5 onwards have been wrapped on the next line)
A container of 10 elements, each 50px wide, and the container is 250px wide - the selector would grab elements 1 thru 5 (element 6 onwards have been wrapped on the next line)
Note: Please refer to this fiddle for reference: http://jsfiddle.net/y7qCJ/ - but obviously nth-child doesn't work like this, and hence my question is here.
nth child is not cross browser so you are back to manually selecting:
.container > li:first-child,
.container > li:first-child+li,
.container > li:first-child+li+li,
.container > li:first-child+li+li+li,
.container > li:first-child+li+li+li+li
{
border:1px solid red;
}
which will target first 5 obviously. If your html is server generated then you could also tack some inline server-side generated css into the head to add this rule (as it is changeable) but if your html will never change then you can just add it to the .css as normal.
See the fiddle
UPDATE:
As you seem to be wanting the amount of LIs targetted to be dependent on the width of the browser in a FLUID layout you will have to do a javascript solution for which the psuedo code is:
on load/resize
lielements[] = .container > li
width = get .container width
licount = abs(width/50)
for(int i = 1; i < licount; ++i)
{
lielements[i].css = apply css class with width:50px to element
}
Short answer - can't be done with CSS