Essentially, what I have in mind is a bunch of div elements, and I want to alternate colours. I could do this using IDs, but I want to use classes to minimize the amount of extra (and potentially spaghetti) code needed.
<div id="divs">
<div class="bla">
</div>
<hr/>
<div class="bla">
</div>
</div>
I've already tried nth-child, but it didn't work.
Edit: And I want to keep the hr.
You need to remove the <hr> element, see this fiddle
HTML
<div id="divs">
<div class="bla">bla</div>
<div class="bla">bla</div>
</div>
CSS
div.bla:nth-child(even) {
background-color: #CCC;
}
div.bla:nth-child(odd) {
background-color: #FFF;
}
Related
I'm trying to match element that dose not match given selector using css.
Given the markup below, I'm trying to select only the first ".color"
<div uid="unique-id-1">
<div> <div class="color"></div> </div>
<div uid="unique-id-2">
<div class="color"></div>
</div>
</div>
I tried [uid="unique-id-1"] .color:not([uid="unique-id-1"] [uid] .color) which did not work obviously, but I think it will help to understand what I am looking for.
Thanks in advance!
If you're only going to apply the selector to this limited combination of elements (i.e. there aren't any other .colors in the page that could potentially be affected by this), then
[uid="unique-id-1"] > div:not([uid]) > .color
Do consider renaming the attribute to data-uid if your application allows, so as to make it clearer that this is an app-specific and non-standard uid attribute.
That seems simple:
[uid="unique-id-1"]>:first-child .color {
color: red;
}
<div uid="unique-id-1">
<div>
<div class="color">A</div>
</div>
<div uid="unique-id-2">
<div class="color">B</div>
</div>
</div>
That being said, uid as an attribute name makes your HTML invalid, so you should rename that to data-uid:
[data-uid="unique-id-1"]>:first-child .color {
color: red;
}
<div data-uid="unique-id-1">
<div>
<div class="color">A</div>
</div>
<div data-uid="unique-id-2">
<div class="color">B</div>
</div>
</div>
I have the following markup:
<div class="chat-area">
<div class="username-area">
</div>
<div class="message-area">
</div>
<div class="options-area">
</div>
</div>
<div class="chat-area">
<div class="username-area">
</div>
<div class="message-area">
</div>
<div class="options-area">
</div>
</div>
And I'm trying to alternate the background colours of username-area between #00A6FF and #27FF00. In my css I have:
.chat-area .username-area:nth-child(odd){
background-color: #00A6FF;
}
.chat-area .username-area:nth-child(even){
background-color: #27FF00;
}
But all the username-area divs are being set to #00A6FF. I tried using :nth-of-type and I've also tried using expressions (2n+1 and 2n+2) instead of 'odd' and 'even' but I'm having no luck figuring this out. I had a look at a few questions on this site but the solutions haven't helped or seem to be addressing issues that don't apply to my code, I think.
Just so that one:
.chat-area:nth-child(odd) .username-area{
background-color: #00A6FF;
}
.chat-area:nth-child(even) .username-area{
background-color: #27FF00;
}
#Marcos Pérez Gude was faster :)
Just give a turn to the ommelete :)
.chat-area:nth-child(odd) .username-area{
background-color: #00A6FF;
}
.chat-area:nth-child(even) .username-area{
background-color: #27FF00;
}
It's because the odd and even elements are .chat-area, not username-area.
i am using zurb foundation for building website, but now i am facing a problem as follows
There are four columns in a row and one of them is not visible sometimes as per some conditions, the code is
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
Now the problem is when the div is disabled the empty space between them should be used by other divs, but it is not happening in my case,
I know, i am missing small point, but cant get it
here is the image of problem
I need the 4th div to be shifted to left, as 3rd div is shifted automatically, if 2nd div is display:none
The ZURB-Foundation (looks like you are using version 4) doesn't work like that by default.
What I usually do is create a .left {float: left !important;} class. If you apply that to your 4th div then it will do as you say.
However depending on your reason for doing this AND WHETHER THIS IS ONLY SUPPOSED TO APPLY TO DESKTOP/TABLET/MOBILE or ALL THREE, you might want to use
#media queries in the stylesheet to specify where and when.
Examples:
#media (query goes here) {
.row .columns:last-child {
float: left;
}
}
** OR **
.left {
float: left !important;
}
THEN
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns left">4 ... </div>
</div>
Try this fiddle
HTML
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
CSS
div.columns
{
padding:10px;
background:#00bfff;
width:20%;
display:block;
float:left;
}
#jnelson thanks for the help, now i realized the power of !important, so i have created simple solution
.abc{
float:left !important;
}
This also worked correctly on all type of devices
You should not be changing the fundamental structure of how the columns are sized or work.
Instead you should just uses different classes. If you know that one column will be disabled, and I am assuming you are using javascript to do this. Then also use javascript to add the proper column width. If you have 3 columns instead of 4(due to one being display none) give the three columns a small-4. This line of thinking will also allow you to handle two columns (small-6).
If you absolutely have to use 3 columns I agree with the above posts that you need to change.
[class*="column"]+[class*="column"]:last-child {
float: right;
to
[class*="column"]+[class*="column"]:last-child {
float: left;
I want to style the following CSS classes; is there any short styling technique for this?
.test-0 { }
.test-2 { }
.test-3 { }
/* etc. */
I am looking for something like:
.test-%d% { }
I want to dynamically create many test-* classes with different numbers and common styles.
Update
here is my actual situation
<input type="button" value="click" class="button_class" />
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
<div style="clear: both;"></div>
</div>
</div>
When user click the above button then same structure will clone and append to the end of the form
so the form will be as
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
</div>
<div id="form_container-1">
<div class="placeholder">Add your form fields here</div>
</div>
</div>
the css class form_container-[%d] will be created dynamically by jquery.
so i want to add style to this class.
also it would be great if you share optimised code for cloning the structure with
different ID.
Please do let me know if you still have doubt.
thanks
You can use an attribute selector.
div[class*='test-'] {...}
I think #Ed W have the right solution BUT I have an extra idea while is not straight forward is shorter than what you have. And will help to make different testing that is waht I think you want... fiddel http://jsfiddle.net/ncubica/2sj9W/
css
.test-1,
.test-2,
.test-3,
.test-4,
.test-5{
color:#F60;
display:block;
}
.test-5{
color:blue
}
html
<span class="test-1">One</span>
<span class="test-2">Two</span>
<span class="test-3">Three</span>
<span class="test-4">Four</span>
<span class="test-5">Five</span>
span five will be in blue color... so you can override the class you want to test and play with it.
Also you can use selectors like
HTML
<div>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span class="test-1">I'm red</span>
</div>
CSS
div > span{
color:pink;
display:block;
}
div > span.test-1{
color:red;
}
and the last span will be red. I hope this help.
My two cents...
I am using the following CSS to try and remove the left-border on the first child div of any element with the class called, "tblRow"
.tblRow div:first-child{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
This only removes the left-border from the first child div in the first row. It does not remove it in the second row. Any ideas?
I generally only use the :first-child and :nth-child psuedo selectors when I have little or no control over the elements or they are populated dynamically where I cannot rely on an order. Additionally, since :nth-child is CSS3, you can't rely on complete browser compatibility. If you can do without this psuedo selector, my advise is to create a secondary class for this purpose.
.tblCell.firstCell{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell firstCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell firstCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
It seems to work on the fiddle, so you probably have a (hidden) text node somewhere there. Therefore I suggest using .tblRow div:first-of-type { ... }, if possible from browser support point-of-view.