I'm having an issue when I set some text to a certain color in my stylesheet, but later on I define a link that has a hover style, that hover style is not showing though. Here's a what I have for my CSS
.parkName{color: #5a712d; font-size:25px;}
a.cardLinkOverlay:link {color: #GERFG4 !important;}
a.cardLinkOverlay:visited {}
a.cardLinkOverlay:active {color: #2495d5 !important;}
a.cardLinkOverlay:hover {color: #2495d5 !important;}
Here is a JSFiddle showing what I have so far: http://jsfiddle.net/rctfan1999/8vr00tzq/2/
If you notice that the word "Yosemite" has a color, but unlike the word "National Park", when you hover over it, it doesn't change colors. Would anybody be able to tell me how to make "Yosemite" change colors on hover?
The color defined on a.cardLinkOverlay is not applied to .parkName because .parkName is a child element of a.cardLinkOverlay. Therefore, the .parkName rule takes precedence over any inheritance of the color values defined by CSS rules that are applied to the parent element.
The way to fix it is to define a CSS rule that targets the element specifically, in this case, using the selector: a.cardLinkOverlay:hover .parkName.
Note that you can omit the !important qualifier, not needed.
.parkType {
font-size:15px;
font-weight:bold;
}
.parkName {
color: #5a712d;
font-size:25px;
}
a.cardLinkOverlay:link {
color: #GERFG4;
}
a.cardLinkOverlay:visited {
}
a.cardLinkOverlay:active {
color: #2495d5;
}
a.cardLinkOverlay:hover {
color: #2495d5;
}
a.cardLinkOverlay:hover .parkName {
color: #2495d5;
}
<a href="http://example.com/page/" class="cardLinkOverlay">
<div class="cardLink">
<div class="col-md-2">
<img src="http://goo.gl/DsstWK" width="170" height="95.5">
</div>
<div class="col-md-9">
<div class="parkName">Yosemite</span></div>
<div class="parkType">National Park</div>
</div>
<div class="col-md-1">
<div class="hidden-xs"><span class="glyphicon glyphicon-menu-right"></span></div>
</div>
</div>
</a>
Your CSS rules are specific to anchor tags with the class "cardLinkOverlay", and so will not apply to nested anchor tags.
Related
I have a HTML like the following :
<p style="color:red">go here</p>
Where A element is produced by Server Side code I haven't access .
In the browser go is red but here isn't due to some CSS code in the page's head element.
I'm wondering is there a way to make the link color inherit without adding style tags or JS codes in inappropriate place of HTML doc that would be stinky . Note that I have no access to whole document but just this section.
You can put style-tags in your body.
<style>
.red, .red a {
color: red !important;
}
<style>
<p class="red">go here</p>
You can use inherit for color property, which means that color property value will be inherited from it's parent
In your case you can do:
<p style="color:inherit">go here</p>
give a name to that div like this
<style>
.vhd p, a{color:red}
</style>
<div class="vhd">
<p>go here</p>
</div>
hope it will work for you
As far as I know, What you are trying to do is not possible INLINE,
You can add style tags in your page if you are able to.
<p class="red">go link</p>
<style>
.red a{
color: red
}
.red{
color: red;
}
</style>
<style>
red.a {
backgrond-color: red;
}
</style>
<div>
<p class="red">here</p>
</div>
or u can use <p class="red"><a href="#" style="color:red;>"here</a></p>
I'm working in Confluence, and I'm trying to create some CSS styling for UI boxes (made up of divs that I can change using !important) without carrying through to child divs. Since other macros (divs with default styling) can be nested inside these UI boxes, the !important styles are carried through unintentionally.
To be more specific - I have a yellow background-color in the div.rwui_type_note. Inside is another div when a user creates a panel macro inside the Note UI box. The parent div (UI Note) styling is making the text background in a child div (Panel) yellow.
I need the div.panel-contentto keep it's default styling as defined by Confluence, or as manually defined by a user in the macro when using the page editor.
Here is the custom CSS for the Note UI Box:
.rwui_type_note, .rwui_type_note p
{
background-color: #FFDC1E !important; /*Needs to be important to override defaults*/
color: black!important;
}
Here is how Confluence creates the HTML when the a white bg panel is created inside a Note UI box:
<div class="rwui_text_box rwui_text_small rwui_type_note rwui_id_caebfd70-f9c3-489b-9f95-c01c1aa13f36 ">
<span class="rwui_icon rwui_iconfont_note"></span>
<span class="rwui_content rwui_body rwui_has_icon ">
<p>Text in a Note UI Box</p>
<div class="panel" style="background-color: white;border-color: orange;border-width: 1px;">
<div class="panelContent" style="background-color: white;">
<p>Text in a Panel - user set to white background</p>
</div>
</div>
</span>
</div>
Here is what it looks like:
Screenshot - UI Box with Panel
If I understood your goal correct, you can do it by inheriting parent background-color property
.rwui_type_note,
.rwui_type_note p {
background-color: #FFDC1E !important;
/*Needs to be important to override defaults*/
color: black !important;
}
.panelContent p {
background-color: inherit !important;
}
<div class="rwui_text_box rwui_text_small rwui_type_note rwui_id_caebfd70-f9c3-489b-9f95-c01c1aa13f36 ">
<span class="rwui_icon rwui_iconfont_note"></span>
<span class="rwui_content rwui_body rwui_has_icon ">
<p>Text in a Note UI Box</p>
<div class="panel" style="background-color: white;border-color: orange;border-width: 1px;">
<div class="panelContent" style="background-color: white;">
<p>Text in a Panel - user set to white background</p>
</div>
</div>
</span>
</div>
You can use > for it. I think this will solve your problem.
.rwui_type_note, .rwui_body > p {
background-color: #FFDC1E!important; /*Needs to be important to override defaults*/
color: black!important;}
Another recommendation is that don't use block elements in an inline element.
I want my css hover style to only happen when the inner span(with class "ag-header-group-text") is not empty (ie showing text). Is this possible through the css only?
https://jsfiddle.net/N8qah/13/
<div class="ag-header-group-cell ag-header-group-cell-with-group" style="width: 80px;">
<div class="ag-header-cell-resize"></div>
<div class="ag-header-group-cell-label"><span class="ag-header-group-text">TEST</span><span class="ag-header-expand-icon"><svg width="10" height="10"><polygon points="0,0 10,5 0,10"></polygon></svg></span>
</div>
</div>
UPDATE:
I changed my css to this which works in that it does't active unless the inner span is not empty - the only issue is the span is highlighted instead of the most outerdiv that the hover happens on
.ag-header-group-cell:hover span.ag-header-group-text:not(:empty) {
background-color: #00008A;
}
Yes It's possible:
a:hover div.toshow:not(:empty) { display:block; }
See it working:
https://jsfiddle.net/N8qah/222/
See more details about :empty and compatibility:
https://developer.mozilla.org/es/docs/Web/CSS/%3Aempty
you could target any child selectors , try this:
.ag-header-group-cell >*:hover {
background-color: #00008A;
}
<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
This code doesn't apply the width of my div
.column-hide {
width: 16.666666666666664%!important;
}
.column-hide * {
display: none;
}
While this works
.column-hide * {
display: none;
}
.column-hide {
width: 16.666666666666664%!important;
}
Any advice?
UPDATE: HTML CODE
<div class="col-md-6 column-hide">
<div class="header-label bg-gray custom-attr-header">
</div>
<div class="fields-body">
<h4 class="pull-left">Texts</h4>
</div>
</div>
An Asterisk (*) is the universal selector for CSS. It matches a single element of any type. So I;ll not suggest to avoid this universal selector. I felt many time if you define same property the last one applied always.
Here is the Working Example.
here is the HTML code and CSS. The last one property will apply to element.
p{color:red;}
p{color:green;} /*will take me as I am defined at last*/
<p>I'll be RED</p>
<p>I'll be GREEN</p>
As you can see the color:green applied at last so <p> element color will be green. same theory will apply in your case as well.
* {
display:none
}
will shows no element of html as * means all element.By using current posted code nothing is showing up. In order to display the content need to remove the above property