<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Home
Quem-somos
FAQ
</div>
</div><!--/span-->
</div><!--/row-->
I have this code above, and i want highlight the current page with the danger color, but the .active class it's blue in this particular code.
I already try setup in my stylesheet:
.active {
background-color: red;
}
but has no effect
Even though specifying !important will work, this is is bad practice as it stops the css cascading and will probably cause more problems than it fixes. All you need to do is to be more specific with your selector.
.list-group a.active { background-color: red;}
See my Example
You could force the override with !important like so:
.active {
background-color: red !important;
}
This worked for me:
a.list-group-item.active {
background: red;
}
Related
I know similar questions have already been asked at least a dozens of times (at least I found a dozen of them), but none of the many answers I found solved my problem.
I just want to color the text which is directly(!) inside these <h3> tags:
<div class="page-header">
<h3> I want this green <div class="page-header-button-group">But not this</div></h3>
</div>
please note: I cannot change anything in the html. I tried this:
.page-header > h3:first-child{
color:green;
}
But it sadly is not doing what I need.
This should help you.
h3 {
color: green;
}
h3>* {
/* all children of h3 */
color: black;
}
<div class="page-header">
<h3> I want this green
<div class="page-header-button-group">But not this</div>
</h3>
</div>
The problem is, that the default value for color is not specified and its value is inherited from the parent (see w3schools). That means, since you specified a color for the <h3> and the <div> has no other color rules, it will inherit the color from its parent.
The only solution is to reset the color with an extra rule for each child. h3:first-child > * (any element which is a direct child of the h3).
.page-header > h3:first-child{
color:green;
}
.page-header > h3:first-child > * {
color: #000;
}
<div class="page-header">
<h3> I want this green <div class="page-header-button-group">But not this</div></h3>
</div>
If this is a common thing in your page, you may also think of a class, e.g.: .color-default { color: #000; } (propably adding !important). Then you can just define the div as <div class="default-color">.
I'm using BEM and I would like to know how to "disable" a block (.element).
By disable I mean using a different CSS background to emulate a disabled state.
.element {
background-color: #FFF;
}
.element__title {
font-weight: bold;
}
<div id="test" class="element">
<div class="element__title">this is the title</div>
</div>
Should I create
.element--disabled {
background-color: #EEE;
}
and apply that to
<div id="test" class="element element--disabled">
What about the __title? I'm not sure if my approach is correct because I want to overwrite the entire block.
element--disabled will be just fine. For more info see https://en.bem.info/method/naming-convention/#modifier-name
I know that we can import a css style into another css style. That's not the thing I'm going to talk about.
I want to create a css style that depend on other css style. In other word, I want to create my own cascading tree system. How can I do that?
For example, how I pictured it in my mind:
div.priceinfo { border: 1px solid gray; width: 200px; }
div.disabled { background-color: gray; color: 333333; }
div.shippinginfo { depend: div.pricebox; border-color: green; }
div.taxinfo { depend: div.pricebox; border-color: blue; }
so I can use it like this:
<div class="priceinfo"> ... </div>
<div class="shippinginfo"> ... </div>
<div class="taxinfo disabled"> ... </div>
but I do not want like this:
<div class="priceinfo shippinginfo"> ... </div>
<div class="priceinfo taxinfo disabled"> ... </div>
I know that the last way is possible, but I'm curious whether there's any way I can do something like the one I described earlier? Thanks for the help.
I think you have to see a LESS CSS for this. a LESS CSS provides a coding for CSS.
http://lesscss.org
I have 2 "links" which has to get a color when i click on them. But they need also be in a h1 tag.
Like this:
<div id="content" class="work">
<h1 style="border-bottom:1px solid #CCC;"><a id="link-grafisk-design" href="#grafisk-design">Grafisk design</a></h1>
<h1 style="border-bottom:1px solid #CCC;"> / </h1>
<h1 style="border-bottom:1px solid #CCC; width:276px"><a id="link-webbdesign" href="#webbdesign">Webbdesign</a></h1>
</div>
But it wont change color when i click in one of them.
Here's the CSS
#webbdesign:target ~ #link-webbdesign {
color:#00A2FF;
}
That's not what :target is for. For styling the link you click on you should use h1 a:active.
h1 a:active {
color:#00A2FF;
}
If you want the changed colour to persist until the user clicks something else, then use:
h1 a:focus,
h1 a:active {
color: #00A2FF;
}
DEMO
I am wondering how i would be able to style links inside a given div with a given class like
.navigation-div : a:link,a:visited {
color:red;
}
Some html
<div class="navigation-div">
Home
List
Download
Files Used
Documentation
</div>
<div class="client-header">
<h1>CRUD Application</h1>
</div>
Is there a selector for this kind of thing?.
.navigation-div a:link, .navigation-div a:visited {
color:red;
}
jsFiddle example