Apply !important CSS style to div, not children - html

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.

Related

Change color of A element inside a div using inline css

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>

Custom Link Color Is Being Overridden

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.

Using CSS to change a class background but only if it is not after a h4

I am trying to change the background colour of PARAGRAPH 4 only. I want to leave Paragraph 2 alone (because it is after a H4). I have tried the not selector but can't seem to get the logic working right. Not wanting to use JavaScript, PHP or jQuery. Only pure CSS please.
.widget-wrap > .widget-title {
background-color: yellow;
}
.widget-title + .textwidget {
background-color: red;
}
<div class="widget-wrap">
<h4 class="widget-title">Paragraph 1 in the div.</h4>
<p class="textwidget">Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<div class="widget-wrap">
<p class="textwidget">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
If the first child of .widget-wrap will only either be an h4.widget-title, or a p.textwidget (i.e. when the h4 is not present), simply use :first-child:
.widget-wrap > .widget-title {
background-color: yellow;
}
.widget-wrap > .textwidget:first-child {
background-color: red;
}
<div class="widget-wrap">
<h4 class="widget-title">Paragraph 1 in the div.</h4>
<p class="textwidget">Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<div class="widget-wrap">
<p class="textwidget">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
If there any other elements may appear before the first p.textwidget absent an h4.widget-title, that will complicate things slightly. You would use :not() with a sibling selector in that case, but if there can be a variable number of elements, you won't be able to do this reliably.
check this out
.widget-wrap:nth-child(2) .textwidget {
background-color: green;
color: white;
}
Why you being not using different class name or id for the paragraph 4. that will be more simple and crystal clear. I would rather suggest you to use.
In current code as class names are same for parent div and P hence the color is changing for all not only for h4. sl please kindly use these.
Html
<div class="widget-wrap">
<p class="textwidget redcolor">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
CSS:
.widget-wrap .redcolor {
background-color: Red !important; /*use important if not works*/
}
so now all elements having class redcolor inside class widget wrap will be having background color red. you can use id or any other class name.
that will be more easier and best approach for than using the any other javascript etc.
It will add more css lines but that will not cause any harm to it.

Position well having another well in center of parent container

In my HTML page, I have a well, in which there is another well. The outer well should be in the center of the page, and the inner well in the center of the outer well. My code is given below:
<div id="container">
<div class="col-md-10"></div>
<div class="well col-md-10">
<p> Office name <span class="right-float">Your desk: <span id="desk-id">not set</span> </span></p>
<hr>
<div class="well col-md-6" align="center">
<p> <span class="glyphicon glyphicon-info-sign"></span>
Start your work by setting a name for your Desk</p>
</div>
</div>
<div class="col-md-10"></div>
</div>
It doesn't work; each well appears on the left-side of its respective parent. Does anyone know how I could position them centrally? Thanks in advance!!
Here's my CSS:
hr {
border-color : #474343;
}
.header-dimensions {
width: 110px;
height: 50px;
}
.logoname-dimensions {
display: inline;
width: 115px;
height: 40px;
}
.navbar-pad:{
padding: 0;
}
.right-float{
float: right;
}
What you are trying to do is kind of working against itself.
First off you apply the well class to the same element as the col-md-* element. This results in the whole element floating to the left (from the col-md-* class). You have to make sure that float is overridden in your own code.
Second, you can't use align="center" to center box elements. It works on text, but I think most people would recommend you to keep the centering in the CSS instead of the HTML.
So when you overridden the float and removed the align attribute I suggest you set a new class on both elements that should be centered and add margin: 0 auto; to that class.
Here is a pen that show how it could be done. The align="center" is removed and I've added the class well__centered to the elements. Check the CSS for the styling.

Style a DIV in the same way as a certain tag

I have a DIV to which I want to apply a style currently prescribed for a certain tag (not class).
I want to use that as a base style for my container element, which will be used by its child elements that will use relative offsets for position and percentage for size.
Say, <h2> has font-size:x-large; font-weight:bold; by default. I could do:
<h2>
<div style="font-size: 50%;">something</div>
<div style="font-size: 80%;">something else</div>
</h2>
But this is invalid HTML, because div cannot be inside h2.
So I need a way to say:
<div style="whatever is currently applied to h2">
...
</div>
Is this possible without JavaScript (like sniffing out style properties using .css())?
Couldn't you use span's?
<h2>
<span style="font-size: 50%;">something</span>
<span style="font-size: 80%;">something else</span>
</h2>
And if you need them to be display: block:
h2 span {
display: block;
}
http://jsfiddle.net/HfQWz/
Although I would say you probably want to more specifically select the span's with a class on the h2, wrapping div.className, or something.