Css
.sidebar .nav li:nth-child(1) a {
color: #fff;
font-size: 24px;
border: none;
background: #27AE60;
}
Html
<li>Dashboard</li>
<li id="accordian">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">New Registration</a>
<ul id="collapseOne" class="nav nav-pills nav-stacked collapse">
<li><i class="glyphicon glyphicon-chevron-right"></i> Resource</li>
<li><i class="glyphicon glyphicon-chevron-right"></i> Client</li>
</ul>
</li>
I want to design first li of parent ul but not the child li
I assume that .nav class is assigned to ul which is directly nested under element having a class of .sidebar so use the direct child selector here
.sidebar > ul.nav > li:first-child a {
color: red;
}
Demo
Note: Better use .sidebar > ul.nav > li:first-child > a instead of
above to be more specific
And if you meant every direct li which are nested under first level parent ul than just get rid of :first-child pseudo
.sidebar > ul.nav > li > a {
color: red;
}
Demo 2
From your code .nav li:nth-child(1) it looks like what you really want is to style the first li's anchor, but not it's adjacent sibling.
(Although you say
I want to design first li of parent ul but not the child li
...I think that you meant to say adjacent sibling
)
So actually given that your markup looks like this:
<ul>
<li>Dashboard
</li>
<li id="accordian">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">New Registration</a>
<ul id="collapseOne" class="nav nav-pills nav-stacked collapse">
<li><i class="glyphicon glyphicon-chevron-right"></i> Resource
</li>
<li><i class="glyphicon glyphicon-chevron-right"></i> Client
</li>
</ul>
</li>
</ul>
.. then the css code you posted actually works.
FIDDLE
Related
I must be doing something unusual, as the related questions and answers I've found so far on Stack Overflow aren't working for me. I'm new to css, so the answer may be obvious.
I prefer the solution to avoid !important, and if possible, only apply to the site header (e.g. not anywhere else on the site; that is, only apply to content inside block with id="my-block").
Also, would like solution to work for all levels in the nav (first, second, etc.).
This is what I tried:
.navbar .navbar-default > li > a:hover {
background-color: #FFFF00;
color: #FF0000;
}
Here's my code that runs along the top of my site:
<nav id="my-block" class="navbar navbar-default navbar-static-top navbar-default-siteheader navbar-inner-siteheader">
<div class="container">
<div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Menu1<span class="caret"></span>
<ul class="dropdown-menu">
...
</ul>
</li>
<li class="dropdown">
Menu2<span class="caret"></span>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
</div>
</div>
</nav>
Change
.navbar .navbar-default > li > a:hover
to
#my-block.navbar li a:hover
You can add your customize id in parent element like :-
<div **id="custom-nav-head"**>
<ul>
<li>Link</li>
</ul>
</div>
and then in css file, use below
**#custom-nav-head** .navbar .navbar-default > li > a:hover {
color: your color
}
if still its not work so then use !important property. Like :-
**#custom-nav-head** .navbar .navbar-default > li > a:hover {
color: your color **!important**;
}
Try this:
a.dropdown:hover{
background-color://whatever colour
}
I'm using a service which doesn't allow me to modify the code, but I"m able to add my own CSS. I am trying to change the CSS of a specific Link inside a li.
Here is my code:
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I want to select only the very first list item and tweak the css settings of the link within it - I want to make the background color and text different. Using the following allows me to change somethings but not the actual text within that li.
.kn-link-1 {
}
I also want to make sure that this change only happens for this specific instance where the parent id="view_81".
Can someone help find the right way to select just that
CSS is not the right place where you should change the content, anyway if you have no other choice, you could use the :after selector to do the following trick:
#view_81 > ul > li:nth-child(1) > a > span {
display: none;
}
#view_81 > ul > li:nth-child(1) > a:after {
background-color: red;
content: "your text";
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span>
</li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span>
</li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span>
</li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span>
</li>
<li class="kn-link-5"><span>Add Comments</span>
</li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span>
</li>
</ul>
</div>
have you tried:
#view_81 ul li.kn-link-1
or
#view_81 ul li:first-child
To clarify my examples: "#" selector in CSS means "the one with the following ID" and then i'm telling the "ul" that comes after that and then the "li" that comes after that which has this class "kn-link-1" or which is the first item inside the tag (:first-child subselector).
I hope some of them help.
use this style:
li:first-of-type span
{
}
also be sure that your style link is last in your style references. If this does not help, declare your styles with "!important" like here:
li:first-of-type span
{
color:red !important;
}
using the selectors: #view_81 .kn-link-1 a targets the element with id="view_81" and the descendant element with class="kn-link-1" and the a tag inside that to change the background and text color.
#view_81 .kn-link-1 > a {
background: red;
color: yellow;
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I would stylize the css like this:
<style>
#view_81 .kn-link-1{
padding: 50px;
background-color: gray;
}
#view_81 .kn-link-1 a{
text-decoration: none;
}
#view_81 .kn-link-1 span{
color: white;
font-weight: bold;
text-shadow: 1px 2px 2px black;
}
</style>
This css only applies to the class .kn-link-1 within id #view_81.
I added a little basic css for your testing purposes, but you get the point.
I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/
The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
How do I make my font color white, on the current nav bar class?
For example, when I click on a link on the nav it adds a class="current" to that link.
But I'm having trouble styling that particular link.
Here's the HTML:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-loggedin-nav mineul pull-right" style="font-size:22px;margin-top:7px; color:white;">
<li>
<a class="current" href="/">
</li>
<li>
Here's my CSS attempt which is way off:
.nav > li > a .current {
color: white;
}
.nav > li > a.current
Just a small change. The space between "a" and ".current" makes it think .current is a new element.
No space between the anchor element selector and the class name selector:
.nav > li > a.current {
color: white;
}
HTML
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-loggedin-nav mineul pull-right" style="font-size:22px;margin-top:7px; color:white;">
<li>
<a class="current" href="/">Text Here</a>
</li>
<li>
CSS
a.current {
color: white;
}
I have the following structure for a navigation …
<ul role="navigation">
<li class="page_item page-item-2">
Sections
<ul class="children">
<li class="page_item">One</li>
<li class="page_item">Two</li>
<li class="page_item">Three</li>
</ul>
</li>
<li class="page_item page-item-6">
About
<ul class="children">
<li class="page_item">Contact</li>
<li class="page_item">Members</li>
<li class="page_item">Become Member</li>
<li class="page_item">Whatever</li>
</ul>
</li>
</ul>
How can I hide the first appearance of each <a> inside the outer list elements?
In my case I'm talking about Sections and About
I thought
ul li > a { display:none; }
or
ul > li > a { display:none; }
should be doing the trick, but it hides everything.
That's because all the as are children of lis which are children of uls.
Your top-level ul has a role="navigation" so you can select that:
ul[role="navigation"] > li > a { display:none; }
I think the easiest and the most efficient way would be to add class like .hidden {display: none;}, but you could also add a class to the outer ul, and then:
.ul-outer-class > li > a { display: none; }
It's also more efficient than using attribute selectors.