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>
Related
Need to target each element that has specific class starting with depth-
I tried targeting with CSS:
[class^="depth-"] {
margin-left: 40px;
}
but it works only when targeted class is the first in classes order.
In my case:
<div class="comment byuser comment-author-admin odd alt depth-2 parent" id="comment-13">
<div id="div-comment-13" class="media">
...
</div>
<div class="comment byuser comment-author-admin even depth-3" id="comment-14">
<div id="div-comment-14" class="media">
...
</div>
</div>
</div>
The CSS [attribute^="value"] Selector will only work when the entire style attribute value starts with given value. If you want to use this selector, then you will have to move the depth-2 and depth-3 classes at the beginning of the attribute as below -
<div class="depth-2 comment byuser comment-author-admin odd alt parent" id="comment-13">
<div id="div-comment-13" class="media">
TXT HERE
</div>
<div class="depth-3 comment byuser comment-author-admin even" id="comment-14">
<div id="div-comment-14" class="media">
MORE HERE
</div>
</div>
</div>
It would not be a good idea to do this. Instead of this, you can use CSS [attribute*="value"] Selector which searches for given value throughout the attribute. So, your css code will look like this without changing the html -
div[class*="depth-"]{
margin-left: 40px;
}
I have the following divs:
<div class="c">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>//this
</div>
<div class="c">
<div class="a"></div>//this
<div class="a"></div>//this
<div class="a"></div>
</div>
<div class="c">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
Is there a CSS selector that lets me select .a elements situated in 3rd,4th and 5th position of the .a matched results?
Something similar to eq() in jQuery.
:nth-child() is not of help here as this is just a simplified case.
This is a fiddle with the results using jQuery. I want to know if there is a solution using just CSS.
No, there is no equivalent to jQuery's :eq() in CSS. In plain English, there is no selector for the nth element matching a complex selector (in your example, the 3rd, 4th and 5th elements matching the selector .a).
Just for the sake of completeness (because someone is going to say "well, actually..."), the specific elements are, of course, reachable with
.c:nth-child(1) > .a:nth-child(3), .c:nth-child(2) > .a:nth-child(1), .c:nth-child(2) > .a:nth-child(2)
But that assumes that is exactly how your markup appears, which is seldom ever a realistic assumption to make, especially if the page is dynamically generated.
In the very unlikely event that your markup is static and you can rely on the 3rd, 4th and 5th .a elements being in those exact positions, by all means use the selector above. But if their positions or structure can vary, then you will need other ways to identify them in CSS, for example with an additional class name.
.c:nth-child(1) .a:nth-child(3) { background:yellow; }
.c:nth-child(2) .a:nth-child(2), .c:nth-child(2) .a:nth-child(1) { background:yellow; }
<div class="c">
<div class="a">c1-a1</div>
<div class="a">c1-a2</div>
<div class="a">c1-a3 //this</div>
</div>
<div class="c">
<div class="a">c2-a1 //this</div>
<div class="a">c2-a2 //this</div>
<div class="a">c2-a3</div>
</div>
<div class="c">
<div class="a">c3-a1</div>
<div class="a">c3-a2</div>
<div class="a">c3-a3</div>
</div>
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;
}
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.