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.
Related
So I've been coding for a week and I have googled for 30 min trying to find a solution. So excuse me if it's already been asked. I'm trying to write a summary of what I've learned after each lesson but it's not working!
<body> <center> h1> Module 40 </h1> </center>
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
</body>
And my CSS is this:
p
{
font-size: 15px;
}
/*****class selector*****/
.p1
{
font-size: 20px;
}
Shouldn't the class selector override the tag selector? Font size 15px is being applied to the whole text. It works if I add class="p1" to the second paragraph. But shouldn't this work if I add it to the div? Isn't that the purpose of having a div?
Must be .p1 p
p
{
font-size: 15px;
}
/*****class selector*****/
.p1 p
{
font-size: 20px;
}
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
This happens because of Specificity. Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
You can find one of the most useful documentations here -
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
No because your paragraph is a child of .p1
All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)
You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag
My html is linked to the right CSS file and everything and when I point any other element to change color it workes but everytime I deal with classes even when I put .class {color: red;} it doesn't work and for the span[yes]{color: purple;} as well.Is it maybe an outdated CSS, something I need to update?
<!doctype html>
<html>
<head>
<title>Css for bigginers</title>
<link rel="stylesheet" type="text/css" href="../Sandbox/syntax.css">
</head>
<body>
<div>
<span >WHats poppin</span>
<span class= "class">yo Im a span tag</span>
<span class= "deck">yo<strong>Im a span tag</strong> </span>
<span class= "deck">yo Im a span tag</span>
<span class= "yes">yo Im a span tag</span>
im a spanner
<p>This is good</p>
<p>The world is beutiful</p>
<p class="test">I know tell me about it</p>
</div>
</body>
</html>
/***** CSS FILE *****/
span[yes]{
color: purple;
}
This is not how you refer to a class. To refer to a class, you must do it like this:
.yes{
color: red;
}
<span class= "yes">yo Im a span tag</span>
You need to use span.class and span.yes instead of span[yes]. A good practice is not to name the class as class or span or any any keywords used in html or css selectors.
By span[yes] you are addressing to spans that have yes attribute. Instead use
.deck{
color: red;
}
where .deck is the name of the class you set in the html element:
<span class= "deck"></span>
In CSS, span[yes] means a <span> element which has the attribute yes, which is obviously not the case in your code. Either span.[class="yes"] or the shorthand span.yes will work. See the chapter Selectors in the CSS specification.
I always wondered how can you select an element that is deeply buried in other elements that have classes and id's ?
For example :
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
If I want to select element then what I would do is write in CSS the following :
.container #footer .sixteen .columns span {
font-weight: bold;
}
Unfortunately it seems that this method is not valid or recognized by browsers.
Let's say that I don't want to give any general styles to 'sixteen columns' class or span itself. I just want to apply very specific styles to this very specific element.
How should I select that span element ?
Given your code:
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
</div><!-- I've chosen to close the opened div element -->
Your selector cannot work, but it is definitely "recognized by browsers." The problem is that it is not, as you say, 'valid' (for the HTML structure that you have).
The problem is that, in CSS, white-space implies an ancestor-descendant relationship, so:
E F
Selects an element, matching selector F, that is a descendant of selector E; your own selector:
.container #footer .sixteen .columns span
selects a <span> element, within an element of class 'columns', within an element of class 'sixteen', within an element of id="footer" itself within an element of class 'container'; giving HTML:
<element class="container">
<element id="footer">
<element class="sixteen">
<element class="columns">
<span></span>
</element>
</element>
</element>
Which bears no resemblance to your own HTML. As white-space establishes an ancestor-descendant relationship, the corollary is that no white-space implies the same element, which is what you were aiming for, I think. Omitting the white-space, then, gives the following selector:
#footer.container .sixteen.columns span {
/* CSS here */
}
This selector is, probably, overly complex (given that an id uniquely identifies an element1), and could be re-written as simply:
#footer .sixteen.columns span {
/* CSS here */
}
Or even, if you're willing, and able, to sacrifice some specificity:
#footer span {
/* CSS here */
}
Note that a class-name is often used in JavaScript to denote a state, state-change or interaction of some kind; so it's not definitively redundant to combine an id with a class (#footer.container), but if the class is not dynamically added or removed, it probably is redundant and unnecessary. As with all things in web-development, it's worth experimenting to find out what works for you; contemporary browsers are fast enough for the most part, that adding a class-name to the selector isn't going to slow things down substantially, but beware of time-critical use-cases, when it's best to remove everything that's not absolutely necessary.
References:
CSS Selectors (and combinators).
with:
#footer > .sixteen.columns > span
Your selector does not work because you have spaces between selectors which refer to the same element.
e.g. .container #footer
But the space reads: "find an element with the id footer that is a descendant of an element with a class that is container". But you mean: "find an element that has the class container AND the id footer" which you can do by concatenating them without a space:
e.g. .container#footer
See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Rearrange your selector like this
#footer.container .sixteen.columns span {
font-weight: bold;
}
<div class="container" id="footer">
<div class="sixteen columns">
<span>some text here</span>
</div>
</div>
#footer span { font-weight: bold; }
<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 am using the html below
<a href=""><div class="logo"><span class="whologo">hyperlinked text </span>
</div></a>
the problem i am having is that the only way to remove underline from the span text is using a:link{text-decoration:none;} but this removes underlines from ALL links from the whole page
I have tried
a.logo:link{text-decoration:none;}
but it doesnt remove the hyperlink from the span element.
You have a wrong hierarchy there and bad element selection. In your case, the most accurate CSS would be:
a div.logo span.whologo {text-decoration:none;}
But I suggest this approach:
<div class="logo"><span class="whologo">hyperlinked text </span>
And CSS:
div.logo a {text-decoration:none;}
Or include the span if needed (but only if the span element has underlines, like Hans pointed out in the comment):
div.logo a span.whologo {text-decoration:none;}
Child items cannot influence their parents using CSS. You need to put an ID or class name on your A tag, or find something unique up the tree that you can specify for this element.
Check this out
<style type="text/css">
.linkTst{text-decoration:none;}
</style>
<div class="logo"><a href="" class="linkTst"><span class="whologo">hyperlinked text </span>
</a> </div>
Put a class on your a tag where you don't want the underline
like this : http://jsfiddle.net/UL8SW/
First of all: This is not valid html... And you should give your a a class or id, otherwise this isnt possible with remote css. It is possible with inline css...
Give anchor tag a class.
HTML:
<a href="" class='no-underline'><div class="logo"><span class="whologo">hyperlinked text</span>
CSS:
.no-underline {text-decoration: none;}