I have the following piece of code based on Twitter's Bootstrap:
<ul class="nav nav-tabs" id="myTab" style="border-bottom-color: black">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
I was able to customize almost all of its css to my needs.
The part I'm stuck at is the <li class="active">, what would be the css rule to overwrite it?
ul.nav.nav-tabs > li.active {
color: red;
}
I think that should do it, or if you only want to target the li in that particular nav
#myTab > li.active {
}
If you want to override it only for this particular navigation, you can simply include the ID to the CSS rule:
#myTab > li.active{
/* Your CSS goes here */
}
li.active is the rule for that tag. Remember that css rules are run in the order that the files are linked, so if you want to overwrite it, just add li.active rules in a css file that is linked after bootstrap.css. You could also just edit bootstrap.css
Related
How can I style only the top level li's from this example list?
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
ul.upper > li {
color:red;
}
This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?
Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed.
So, your li are inheriting color from their ancestors, so you need to add color:initial, or color:black to override that
ul.upper > li {
color: red;
}
li {
color: initial;
}
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
You want the child combinator, ">"
.upper > li
You can define the deeply nested UL's list-items like this:
ul > li {
color:red;
}
ul ul > li {
color: #000;
}
So this can work throughout your page to identify any top-level list-items versus second-level list-items, regardless of class name. "ul ul" in CSS means "ul that is inside another ul"
Working example: https://jsfiddle.net/2Lyvp2bm/2
(I'm new, how do I add a code snippet to my answer?)
I have this DOM Tree:
<ul id="menu-horizontalnav" class="menu">
<li id="menu-item-19">
<ul class="sub-menu">
<li id="menu-item-99" ></li>
</ul>
</li>
</ul>
Now I want that the <ul class="sub-menu"> and his child content is hidden.
I added a new .css rule to my style.css file:
But as you can see it gets overriden by this rule:
If I deactivate display: block; everything works.
My Quesiton is how can I add a .css rule which is only valid for the class="sub-menu"
without getting this rule overriden by the rule .menu ul
In my Understanding from the .css rules the display: none; rule should override the
display: block; rule, because it is deeper in the hiracy
I added my code in the style.css file in my child theme
A trivial way would be to overwrite the CSS rule by marking it as important:
.sub-menu {
display: none !important;
}
But this technique should be avoided if at all possible for various reasons.
The better way would be to explicitely address the place the sub-menu class takes in the DOM hierarchy in your css:
.menu ul.sub-menu {
display: none;
}
This instruction is more specific than just using .menu ul and will thus be preferred by the browser.
Just add the following css:
ul .submenu {display:none !important;}
It should solve your problem and override the ul.menu class
Add
hideMenu
{
display:none !important;
}
Whenever you want to hide , add this class using addClass or just add the property alone.
Whenever you want to remove this, removeClass or remove the property.
HOw to style link with class selected under this html structure
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
<a class="selected" href="/page">Page</a>
</li>
</ul>
</li>
This should do it for you:
.submenu_items ul li a.selected{
/* your CSS properties here */
}
You can also use the > operator to denote a direct descendant.
There are a number of variations in how you can target the .selected link, I'd also reccommend you have a look at the MDN article on CSS specificity
Use the below to style selected
.submenu_items ul li > a.selected{/* your code goes here. */}
Hope this helps.
To over-ride parent styles (in this case 'submenu_items') you just need to make your CSS targeting more specific. For example:
.submenu_items ul li a.selected{
/* Add your CSS */
}
I have defined a class in my main.css file.
.red {
color: #d14;
}
And using it like this.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active red">
<i class="icon-leaf icon-white"></i>Admin
</li>
</ul>
</div>
</div>
Besides my main.css I also import the twitter bootstrap css file.
This way it does not work. Is it because Bootstrap is overruling my color definition?
The only element in your markup that could visually apply this style is the <a>, and that element has a lot of really specific CSS rules applied to it by Twitter Bootstrap, stuff like this:
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color:#FFFFFF;
}
You'll have to write something even more specific to get the style to apply:
.navbar .navbar-inner .nav .red a {
color: #d14;
}
Demo: http://jsfiddle.net/pYGaG/
You could use !important on the rule if you really had to, but I really feel that you should avoid it as much as possible. If this is a single element that has this style, consider adding an id to it, which carries a lot of weight specificity-wise:
<li class="active" id="home_link">
<i class="icon-leaf icon-white"></i>Admin
</li>
#home_link a {
color: #d14;
}
http://jsfiddle.net/pYGaG/1/
Here are a couple good articles on CSS specificity:
http://css-tricks.com/specifics-on-css-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
And as a side note, try to avoid presentational class names like red. Use more meaningful ones that aren't tied to the way it should look, but what it is (for example, .active-link).
Your're defining the red color on a <li>-Tag, but there is no text. The text is inside the <a>-Tag, so you need to overwrite this rule.
Code something like this:
.red a {
color: #d14;
}
Update: Go for the answer given by Wesley Murch.
In pyroCMS it echo's its navigation like:
<li class="last current">
portfolio
</li>
What I am trying to do is format the li.current and in my css code I have the following:
header nav li.current{
font:18px Myriad Pro;
color:#2d2d2d;
}
But this does not seem to be sticking to the current page, Are there any other ways that I could code the css for the particular css current class?
Do you have other rules that apply to anchors? Try
header nav li.current > a