I have the following html code and I'm searching a way to select the span's elements identified by class="selection" only inside after a select element where id beginning with "cf-":
<select id="cf-1234567891322418287202826"></select>
<span class="select2 select2-container">
<span class="selection">
<span class="select2-selection"></span> // Apply CSS HERE
</span>
</span>
<select id="cf-8298298876787346863834334"></select>
<span class="select2 select2-container">
<span class="selection">
<span class="select2-selection"></span> // Apply CSS HERE
</span>
</span>
<select id="tu-656555"></select>
<span class="select2 select2-container">
<span class="selection">
<span class="select2-selection"></span> // DO NOT Apply CSS HERE
</span>
</span>
I tried the following code without any result. Where is my mistake ?
select[id^="cf-"] + span.select2-selection {
color: blue;
}
span.select2-selection is not a sibling of select[id^="cf-"] so you need to change that selector into
select[id^="cf-"] + span span.select2-selection {
...
}
since you are trying to match a span.select2-selection which is a child of a span element which is a sibling of select[id^="cf-"].
this should do it:
[id*="cf-"] .selection{
//css code here
}
additional info:
[id*="sometext"]
will select any element with id containing "sometext"
by putting a space after that you can specify a element within this element
doing .selection will select the element with class "selection" inside the element with id containing that tex
Related
I browsed into the MDN CSS documentation but I don't see any Combinators that can select the element I want to style.
/* second-span red when first-span is present */
[first-span] ~ [second-span] {
color: red;
}
/* first-span blue ONLY when second-span is present */
/* HOW TO ? */
[first-span] /* combinator doesn't exist */ {
color: blue;
}
<p>
<span first-span="">I am #1</span><br>
<span second-span="">I am #2</span>
</p>
<p>
<span first-span="">I am #1</span>
<!-- no second span -->
</p>
<p>
<span second-span="">I am #2</span>
</p>
I try to apply a style to an element ONLY if another specified sibling is found among below siblings.
In the snippet, the first CSS statement is used to style an element if the left hand in the selection expression is found among above siblings. But it seems like there is not combinator to have the opposite effect.
How can I do that ?
Through combining nth-child with other pseudo classes it enables you to specify elements from sets of elements with specific lengths.
This is complicated slightly by your use of the <br> tag, as its a child element of <p>, however, this should still work for your needs:
/* this will color the first element of three children nested in a p tag blue */
p span:nth-child(1):nth-last-child(3){
color: blue;
}
/* this will color the third element of three children nested in a p tag red */
p span:nth-child(3):nth-last-child(1) {
color: red;
}
<p>
<span first-span="">I am #1</span><br>
<span second-span="">I am #2</span>
</p>
<p>
<span first-span="">I am #1</span>
<!-- no second span -->
</p>
<p>
<span second-span="">I am #2</span>
</p>
This targets the first of three elements, then the last of three.
You can use jQuery (to keep things clean), like this:
if($('p > span:nth-of-type(2)').length) {
$('p > span:nth-of-type(1)').css('color','red');
}
Check if element exists in jQuery
I need to give a certain span a specific color, but only when it's previous sibling has "display: block". I don't have direct access to the HTML so this are the only classes I can work with.
<div class="price-content">
<span class="old-price">
**<span class="new-price>**
<span class="percentage">
</div>
I have this all over the page repeating, "old-price" is hidden by default. But sometimes it has "display: block". How can I give "new-price" a specific color, only when "old-price" is displaying?
Using jQuery, look for all the .old-price elements. If they've got display:block, then modify their sibling .new-price element. Here's an example:
$(document).ready(function() {
$.each($('.price-content > .old-price'), function(i, el) {
$oldPrice = $(el);
if ($oldPrice.css('display') === 'block') {
$oldPrice.next('.new-price').css('color', 'purple');
// Or maybe do 'addClass' for semantic's sake
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-content">
<span class="old-price" style="display: none">$5.98</span>
<span class="new-price">$5.15</span>
<span class="percentage">14%</span>
</div>
<hr />
<div class="price-content">
<span class="old-price" style="display: block">$5.98</span>
<span class="new-price">$5.15</span>
<span class="percentage">14%</span>
</div>
AFAIK, you need JavaScript to do this. A simple solution would be to add a new class that represents whether the .old-price element is display: block (called block below).
.old-price.block + .new-price {
color: red;
}
<div class="price-content">
<span class="old-price block">OLD PRICE</span>
<span class="new-price">NEW PRICE</span>
<span class="percentage">%</span>
</div>
<h3 class="st-module-heading">
<span>
<span>Lastest Products</span>
</span>
</h3>
I want to defind css for span element contain content "Latest Products".
How will do do? Thanks so much.
One option would be to give the span a class:
<h3 class="st-module-heading">
<span>
<span class='myspan'>Lastest Products</span>
</span>
</h3>
Then in CSS, depending on how specific or general you need to be:
.myspan { ... }
/*or*/
span.myspan { ... }
/*or*/
h3.st-module-heading span.myspan { ... }
Without a specific class defined, you would need to do this:
h3.st-module-heading span span { ... }
Which selects the <span> inside the <span> inside <h3 class=st-module-heading>.
But why the extra <span>? In your current code, it is not doing anything. You could just as easily remove it all together unless you are going to need it for something.
Either way, here's a Fiddle to play around with.
the selector should be:
h3.st-module-heading span {
}
html:
<h3 class="st-module-heading">
<span>Lastest Products</span>
</h3>
Assuming that exact structure (the two nested spans), you can use the following css to only select the second nested span:
HTML:
<h3 class="st-module-heading">
<span>
<span>Lastest Products</span>
</span>
</h3>
CSS:
.st-module-heading>span>span {
/* Your css here */
}
The > is the child selector - so .st-module-heading>span>span literally means 'select the span which is directly inside another span, which is directly inside the element with the class st-module-heading'.
You could simply use .st-module-heading span span if need be - but that may not suit if you have additional nested spans.
Link to JS Fiddle.
I want to know what the proper selector is for the example below
<span class="A">
<span class="B_C"></span>
<span class="B_D"></span>
<span>
I want to select all the classes starting with B_ nested inside of A. I have tried each of these, but none of them worked:
.A + [class^="B_"], .A + [class*=" B_"]
.A > [class^="B_"], .A > [class*=" B_"]
.A [class^="B_"], .A [class*=" B_"]
An Element can have multiple classes so you can make it much easier if you just select by class:
<span class="A">
<span class="class_b class_c"></span>
<span class="class_b class_d"></span>
<span>
you can select all class that have b:
.A .class_b
.A [class^="B_"] works. Typically you'd put that attribute selector with another element though, like .A span[class^="B_"] (which also works).
Demo:
Output:
CSS:
.A [class^="B_"] {
color: red;
}
HTML:
<span class="A">
<span class="B_C">B_C</span>
<span class="B_D">B_D</span>
<span class="C_D">C_D</span>
<span>
I need to change the style of a checkbox label.
this is my html:
<div class="ui-checkbox">
<input id="keepMeInformed" type="checkbox" data-theme="d" onchange="fixCheckboxesValues();" checked="checked" value="1" name="optedIn">
<label class="optional ui-btn ui-btn-icon-left ui-btn-corner-all ui-btn-up-d ui-checkbox-off" for="keepMeInformed" data-theme="d">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">Label text</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-off"></span>
</span>
</label>
</div>
I need the text to be red but if I change the .ui-btn-text class style all the buttons of the page will get the red text style.
.ui-btn-text{
color:red;
}
Is there a way to change only the color of the label in the checkbox?
Edit:
thanks guys I solved the problem adding a div that wrapped the CheckBox and wrote jQuery:
function changeCheckBoxStyle() {
$('#checkBoxWrapper').find('[class=ui-btn-text]').css('color','red');
}
but I think that scott's solution works ok too :) thanks
Assuming you are using ID's correctly (unique to a page) then this should work:
#keepMeInformed + label .ui-btn-text {
color: red;
}
It looks for the unique input element keepMeInformed and then finds the sibling label element next to it and applies the style to that label's .ui-btn-text class element only.