css - How do I defind style for this structure - html

<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.

Related

how to change css style of an html element only if specified sibling exists?

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

Selecting strangely nested elements

I can't seem to find a situation similar enough that I can figure out a solution. Without changing the html and adding classes and ids how can I select the a tag and the pre tag from the following code? I've included my attempts.
div.info p.c6 span a {
background-color: red;
}
p.c6 span pre {
background-color: blue;
}
<div class="info">
<h1 class="c4">
<a name="h.6q469n2havqi"></a><span>Title</span>
</h1>
<p class="c6">
<span>
<pre>
words
</pre>
<br>
Top of Page
<br>
</span>
</p>
</div>
Because the p element can only contain phrasing content, and in this case it contains flow content, the browser is closing the element and invalidating your selectors.
In short, the pre element is flow content and cannot be contained inside a p element. Therefore, the browser is overriding your HTML structure to maintain valid mark-up. Here's what it looks like:
The browser has essentially converted your p descendants into p siblings.
You need to restructure your HTML for your selectors to work.
If you can't change the HTML, a sibling selector will work.

unable to target specific css class

trying to target .product-price on-sale to change the color to green but i'm not able to.
HTML
<h2 id="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="USD" />
<link itemprop="availability" href="http://schema.org/InStock" />
<span class="product-price on-sale" itemprop="price">$ 1</span> <del class="product-compare-price"></del>
</h2>
CSS
section#buy h2.product-price-on-sale span {
color:green !important;
}
With reference to your code this should work:
h2#product-price span.product-price.on-sale{
color:green;
}
Your CSS selector is wrong because your .product-price-on-sale class is on your span element not your h2. It should be
section#buy h2 .product-price.on-sale {
color:green !important;
}
A few problems with your selector:
section#buy h2.product-price-on-sale span
First part:
section#buy
It's ok assuming you have an extra wrapper with id buy
<section id="buy">
Second part
h2.product-price-on-sale
Wrong since element h2 doesn't have a classname of product-price-on-sale instead has an id product-price, must be at this point:
section#buy h2#product-price
Third part:
span
It's ok since the span element is inside the h2, but if you want to target the one with class product-price and on-sale your final selector must be:
section#buy h2#product-price span.product-price.on-sale
class="product-price on-sale"
... h2.product-price-on-sale
You wrote it as two classes in the html and as one class in css (space vs dash).
The css for two class selection is .class1.class2.
You also are not targeting the right tag, as pointed by other answers.

how to select a class which is children of many elements

<div class="rightsidebox">
<div class="item-info-list">
<p>Model: AIDCU</p>
<div class="product-details">
<p></p>
<div class="price-box"> <span class="regular-price" id="product-price-1617-related">
<span class="price">$8.99</span></span>
</div>
<p></p>
</div>
</div>
I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes
I can use div.rightsidebox>div.item-info-list
but I cannot go further because of the paragraph in there
how can I solve it? I have weakness in using ">" and multiple classes in each other
This I believe is what you are looking for:
div.rightsidebox>div.item-info-list>div.product-details {
background:#ff0000;
}
JSFiddle: http://jsfiddle.net/RF5e7/
If you merely just want to select the price and make it green if it is contained by rightbox:
.rightsidebox .price {
color: green !important;
}
.rightsidebox .price { color: green !important; } // important to override other styles
EDIT: Usage of > - selectorr
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info
div.rightsidebox>div.item-info-list .price{
color: green;
}
JSFiddle example.
.rightsidebox .item-info-list p {
/* code */
}
This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).
You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.
You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Why use ">" in CSS?

If I want to add styling to all p elements inside of a div, why should I use
div > p{
*style here*
}
as opposed to just
div p{
*style here*
}
furthermore, if I want to use a pseudo class, why would I then choose to use ">"
div > p:first-child{
*style here*
}
instead of
div p:first-child{
*style here*
}
Are there any benefits or drawbacks?
what does that operator do?
It's the direct child, not a recursive match.
CSS
div > p {
}
HTML
<div>
<p>Match</p>
<span>
<p>No match</p>
</span>
</div>
CSS
div p {
}
Markup
<div>
<p>Match</p>
<span>
<p>Match</p>
</span>
</div>
Because it means direct child.
Your second example would match the p in this example
<div>
<header>
<p>
</p>
</header>
</div>
> and (space) are relationship selectors meaning "child" and "descendant" respectively. On top of the semantic differences others have pointed out, a child selector computes faster as it avoids redundant DOM tree traversal on non-matching elements.