I have this code that styles the <a href="#">:
<div class="styled">
link
<div class="notStyled">
another link
</div>
</div>
The first link have one style and the second link have the same style, I want it to be default like a clean link.
Here, try this JSFiddle example,
.styled > a {
color:black;
}
The > used in this means it only selects direct children of .styled and not ALL children.
What you are probably doing is .styled a, which selects all children (even nested within others), and you don't want to do that...
Without seeing your code I can only guess what you have done.
From your question I get you want to style the first, but not the second a tag.
You could use this to style only the first a tag:
.styled > a {
/* your styling */
}
The > selects the direct children of .styled so this will not style your .notStyled a.
Try this :
.styled > a {
color:red; /*custom style for the first link*/
}
live exemple : http://jsfiddle.net/72bQM/1/
I don't know if this is what you did, but it looks like the second <div> is there just as a try to let the second link have no-style.
I suggest, instead, to give have this code
<div>
<a href="#" class="styled">
<a href="#">
</div>
And then in CSS just
.styled{
/* Give the style you want */
}
This way you just have to add the class="styled" to the link you want to be styled, without using many DIVs.
Related
I have applied background color for popover.
Problem is, how to change background color for only popover using css.
a.top > .popover {
background-color:red;
}
My code is add here
Thanks for your help in advance
Add custom class for a
HTML
<a data-content="Content" data-placement="top" data-toggle="popover" title="" href="#" data-original-title="Header" class="test">top</a>
CSS
.test + .popover.top {
background-color: red;
}
THIS WORKS WELL
.popover.fade.top.in{background-color:white;}
.popover.fade.bottom.in{background-color:red;}
.popover.fade.left.in{background-color:yellow;}
.popover.fade.right.in{background-color:green;}
CHANGE THE COLOR YOU WANT TO CHANGE.
jsfiddle demo
There are two ways to solve this problem:
Add a class to that one popover element and focus it by using that class in your CSS (make sure you add it after the standard styles being used for all the other popovers).
Style only this one popover by counting. If you do know it's position relative to the other popovers in the DOM you could select it with the nth-of-type or the nth-child selector. Here is a wonderful article explaining the whole concept: http://alistapart.com/article/quantity-queries-for-css
<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
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;}
It appears some browsers (Chrome at least) put a partial underline under images that are nested inside of an anchor tag, like this:
<img src="/foo.jpg" />
So I'm looking for a way to add text-decoration: none; to any anchor tags that contain an img tag. My first thought was this:
a img {
text-decoration: none;
}
Of course that doesn't work, because the style gets applied to the img tag, and not the anchor. So is there a selector I can use to apply the text-decoration style to any anchor tag with a img child?
EDIT:
My HTML typically looks like this:
<a href="#">
<img src="/foo.jpg" />
</a>
The way I space and tab the elements is adding extra whitespace between the anchor tag, and image tag. It's that white space that's being underlined.
If you're against adding a class to this <a> tag (which is the simple solution), your next best CSS solution would be to remove text-decoration on the <a> tag, and wrap the text you want to have underlined in an inline element. See below:
For images:
<a href="#">
<img src="/foo.jpg" alt="etc" />
</a>
For text:
<a href="#">
<span>Text that you probably want underlined</span>
</a>
Combined:
<a href="#">
<img src="/foo.jpg" alt="etc" /> <span>Text that you probably want underlined</span>
</a>
CSS:
a { text-decoration: none; }
a:hover span { text-decoration: underline; }
Unfortunately there is no way currently of selecting the parent of an element using just CSS.
You would need to resort to javascript or jQuery.
Personally I would do something in jQuery like
$('a>img').parent().addClass('noTextDecoration');
then in css have the following:
a.noTextDecoration {test-decoration:none;}
I just use
img {
border:none;
}
So far as I can tell, there is no way to select an element's parent in CSS. You could try applying some class, i.e. imagelink to A elements that contain IMG elements, though.
If the href attribute of these anchors always points to images, and no anchors point to images besides the one with actually an img tag inside, then you can use:
a[href$=".gif"],
a[href$=".png"],
... ,
a[href$=".jpg"] {
text-decoration: none;
}
Hey does anyone know how I would accomplsh this with pure css.
<a id="link"><span>Some Text</span></a>
<div id="someDiv"></div>
Make the spans "Some Text" a certain color when someDiv is moused over.
Not sure if this is possible. Thank.
Due to the way CSS selectors work, there's no previous sibling selector. So with your existing markup you can't use pure CSS to do it.
If the link were to come after the div, however:
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
The selector to use would be #someDiv:hover + #link span.
This might be possible if you have a parent element to associate the css hover class with. For example:-
<div id="parent">
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
</div>
& den use the following css.
#link
{
position:absolute; /*This is to ensure the hover is activated only on the someDiv div & as absolutely positioned elements are removed from the normal flow of the document*/
/*You can position this anchor tag wherever you want then */
}
#parent:hover > link > span
{
color:#000;
/*enter code here/*
}
Pure css? Working in all browsers? Not possible in this structure.
I think this should work, assuming these two elements share the same parent and a#link is the first child of that parent element.
#parent div#someDiv:hover ~ a#link:first-child span {
color: blue;
}
IE6 doesn't support it, but if you can live without IE6 (and you really should, IMO), you should be okay.