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>
Related
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
Say I have the following.
<div class="price">$64 used
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
I only want to select the "$64 used", not the rest in the child spans. How would I do something like this? I have tried selecting like below and none work.
article > .price
article > .price:not(span)
article > div:not(span)
article > div:not(.originally):not(.you-save)
EDIT: For clarification..
const test = document.querySelector('section > div.price');
console.log(test.innerText);
$64 Used$160 New
You save 60%
I only want $64 Used. Is this even possible? I did not make the site, I am trying to scrape this.
div.price
do the work. For me, better is just use
.price.
Just make a small change:
<div class="price">
<span>$64 used</span>
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
CSS:
article > .price > span:not([class]) { color: red; }
This is not how tag:not() works. You can exclude a span tag from taking the style for span tags. But you can not select children this way.
Just apply a style to the div and overwride the properties for the children.
.price {
color: blue;
}
span.originally {
color: green;
}
span.you-save {
color: red;
}
<article>
<div class="price">$64 used
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
</article>
<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.
Ok i have a simple question maybe i am missing something stupid here but I have this little block of html
<div class="span2">
<span class="price flRight salePrice">$11.25 <span>$4.99</span></span>
</div>
With this CSS
.span2 .salePrice{text-decoration:line-through;}
.span2 .salePrice span{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}
But why is the line through on the second span I added important and figured it would be overwritten but it isnt. Why is this not taking?
I have a simple fiddle set up incase it helps http://jsfiddle.net/XJwns/
I am sure i am overlooking something stupid here but please point me to my mistake
Your CSS is telling it to put a line through .salePrice, which is what it is doing, child <span> and all.
The more "standard" way of doing this is:
<span class="price flRight salePrice"><del>$11.25</del> <ins>$4.99</ins></span>
You can then style the old and new prices independently.
Because you can't "cancel" the line-through coming from the parent element. You can, of course, separate them into two siblings spans.
HTML
<div class="span2">
<span class="price flRight salePrice">$11.25</span> <span class="other">$4.99</span>
</div>
CSS
.span2 .salePrice{text-decoration:line-through;}
.span2 .other{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}
See here: http://jsfiddle.net/XJwns/1/
It's because your span's are nested, the outer strikethru overlays your inner span. Unnest them and apply styles separately, so you don't have to use !important:
<div class="span2">
<span class="price flRight">$11.25</span><span class="salePrice">$4.99</span>
</div>
.span2 .price{text-decoration:line-through;}
.span2 .salePrice {color:#cd202c;font-weight:bold;margin-left:5px;display: block;}
http://jsfiddle.net/UBsm8/1/
if you set nested child as inline-block, text-decoration is applied because layout is triggered somehow.
http://jsfiddle.net/XJwns/4/
to have this inline-box to slide under text, you need parent to have a reduced width, this is more like a trick.
.span2 .salePrice {
text-decoration:line-through;
}
.span2 .salePrice span {
color:#cd202c;
font-weight:bold;
margin-left:5px;
text-decoration: none !important;
display:inline-block;
}
.salePrice {
display:inline-block;
width:1em;/* will force to wrap words, boxes in lines */
}
I have three span elements:
<span "id="span1" class="class1"> span 1 </span>
<span "id="span2" class="class2"> span 2 </span>
<span "id="span3" class="class1 class2"> span 3 </span>
I want to set the style for the element that has both class1 and class2. So, while the first and third spans share class1 and the second and third spans share class2, I would only like for the third one to be styled according to its classes.
You can do it like this:
.class1.class2 {
color: yellow;
}
Demo.
Try this:
.class1.class2 {
color: yellow;
}
Try this
.class1.class2 {
color: yellow
}
You would setup your css as follows
give each the same class so that you can format all elements use id for custom
<style>
.class1 {
color:green;
}
#span3 {
color:yellow;
}
</style>
<span "id="span1" class="class1"> span 1 </span>
<span "id="span2" class="class1"> span 2 </span>
<span "id="span3" class="class1"> span 3 </span>
the id css will overwrite the css for the class giving you unique control over each element