I have the following HTML:
<div class="tocolor">tocolor 1
<div id="one">tocolor 11</div>
</div>
<div class="mplampla"><span id="two">
</span>tocolor 2</div>
<div class="tocolor-2"><span id="three">
</span>tocolor 3</div>
<div class="tocolor tocolor-1">tocolor 4
<span id="one">tocolor 44</span>
</div>
and I want to style (let's say color green) "tocolor 11" using a combination of atrribute selectors.
I tried the following CSS but it doesn't do anything
div[class*='tocolor'][div[id*='one']] {
color:green
}
Thanks
Used to this
div[class*='tocolor'] div[id*='one'] {
color:green
}
and this
div[class*='tocolor'] > div[id*='one'] {
color:green
}
Demo
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 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>
I have this html code:
<div class="form-group well">
<p>...</p>
<hr>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
</div>
And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.
I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.
Is there any solution to select this element without adding any code of html?
JSFiddle
You can use this:
.select-skill:nth-of-type(2){
background:red;
}
Or if there are more in different div's, you can do:
.form-group .select-skill:nth-of-type(2){
/*styles*/
}
instead.
I need help selecting the following DIVs based on IDs but excluding some of the children DIVs in two different types of pages using a single style.css file:
PAGE1:
...
<div id="main">
<div id="post"> selected </div>
</div>
...
PAGE2:
...
<div id="main">
<div id="maincontent"> selected </div>
<div id="singlepost">
<div id="post"> selected </div>
<div id="comments"> excluded </div>
</div>
<div id="sidebar"> excluded </div>
</div>
....
I have tried with:
#main > :not(#sidebar), #singlepost > :not(#comments) a {
color: rgb(88, 134, 76) !important;
}
(!important overrides some inline CSS I cannot change)
The result is bad because Chrome only recognizes #main > :not(#sidebar), and ignores #singlepost > :not(#comments) a, thus turning all text into this color, not just links, and only excluding <div id="sidebar">, not <div id="comments?>.
I also tried:
#singlepost > :not(#comments) a {
color: rgb(88, 134, 76) !important;
}
#main > :not(#sidebar) a {
color: rgb(88, 134, 76) !important;
}
Now everything works as intended but <div id="comments"> is not excluded.
Please help,
Dan
Try to overwrite your style for #comments using !important for a certain property.
You can use the class name:
<div id="main">
<div id="maincontent" class="selected"> selected </div>
<div id="singlepost" class="selected">
<div id="post" class="selected-items"> selected </div>
<div id="comments" class="notSeleted-item"> excluded </div>
</div>
<div id="sidebar" class="notSelected"> excluded </div>
</div>
you would use the class, like this:
.selected {/*your style*/}
.selected-item a{/*your style*/}
Can't you just do
#maincontent, #post {
color: rgb(88, 134, 76);
}
example
Since you're using ids.
Another way would be to create a class for them. example
I have this HTML:
<div class="row-fluid list-item-main-euvou-entradas">
<div class="span1 list-item-main-euvou-entradas-colorcode green"></div>
<div class="span1 list-item-main-euvou-entradas-rank">1</div>
<div class="span1 list-item-main-euvou-entradas-votes">Votos</div>
<div class="span9 list-item-main-euvou-entradas-content">
some link
<p>some text...<p>
</div>
</div>
I need to select this class "span1 list-item-main-euvou-entradas-colorcode green" using also this classes in the selector "row-fluid list-item-main-euvou-entradas".
Ive tried something like this, but does not work:
.row-fluid .list-item-main-euvou-entradas .span1 .list-item-main-euvou-entradas-colorcode .green {
some css code;
}
Any clue on this one?
Best Regards,
You need to remove the spaces between the class:
.row-fluid.list-item-main-euvou-entradas .span1.list-item-main-euvou-entradas-colorcode.green {
some css code;
}
so for the parent div (2 classes)
.row-fluid.list-item-main-euvou-entradas
and the child (3 classes)
.span1.list-item-main-euvou-entradas-colorcode.green
you can try this:
CSS CODE
div.row-fluid.list-item-main-euvou-entradas div.span1.list-item-main-euvou-entradas-colorcode.green {
/*some css code*/
color:red;
}