I'm trying to make a list that has a different first letter for some of the items in the main menu. I have the first-letter psuedo element working across the list, but don't want it to show on the first and last child in the list.
.main-navigation li a:first-letter {
color: #e88a2a;
}
.main-navigation li ul li a:first-letter {
color: #6a6a6a;
}
I'm using the first part this code to colour the first letter in the menu items, and then the second part to stop the sub-menu items taking that colour.
However, trying to use
.main-navigation li a:first-child:first-letter {
color: #f0f0f0;
}
is giving every first letter in the menu items and sub-menu items that colour, rather than just the first one (Home in my fiddle)
I want Home and Contact Us not to show the orange colour, or else show a different colour (the default one), whichever is easiest. Can someone help?
http://jsfiddle.net/wM9eA/
You need to target the li element with first-child, the same goes for last-child.
.main-navigation li:first-child a:first-letter,
.main-navigation li:last-child a:first-letter{
color: #f0f0f0;
}
Working Fiddle
You want the first and last li elements.
.main-navigation li:first-child a:first-letter,
.main-navigation li:last-child a:first-letter {
color: inherit;
}
The problem here is that :first-child applies to the element that it's applied to directly, while :first-letter applies to that element's content. Saying a:first-child will pick the first a inside the li, and there are only one a in each li. We need to apply select that to the li.
Working Fiddle
.main-navigation li:first-child a:first-letter {
color: #e88a2a;
}
.main-navigation li ul li:first-child a:first-letter {
color: #6a6a6a;
}
Related
I want to change the color of the parent and the sub parent category into two different colours. Currently using the following code for my widget side tab.
.widget ul {background: gray;padding-top: 1px;}
.widget ul li {background:lightgray;margin: 1px;}
.widget ul a{background-color:darkgray;padding:1px;}
looking to change the font colour. I have tried many options but still not getting it right.
Try this:
.widget ul li.parent > a {
color: red !important;
}
It's hard to say without seeing your HTML structure, but are each of the sub-parent links ('Access Control', 'Electronic locks', etc) their own ul tags?
If so, could you not target each of their first li's like this:
.widget ul > li:first-of-type > a {
color: red;
/* INSERT STYLES */
}
This would target all uls' first li > a elements, as in the image on the right.
I'm trying a pure css approach to keeping the 'parent-most' navbar item highlighted when a child is clicked upon and a user navigates to that page. I have a primary navbar div with an unordered list, and each list has a list like so, so in this case a user navigates to the second most li here:
.primary-navbar ul li ul li{
background-color: red !important;
}
how do I make it so when the second li is active, the first li has background color of blue?
I tried:
.primary-navbar ul li:active {
background-color: blue !important
}
but that did not work and I'm not sure why. I'm trying to avoid jquery...
:active is the state of the element when active (i.e. a link is active when it is clicked). When you load the new page, no elements are active. You'll need to add a class to the li on the new page (something like 'active' or 'current-page' for example) to get the effect you're looking for. It's not possible with CSS only.
When you implement that, you should also take a second look at your CSS:
.primary-navbar ul li.active {
background-color: blue !important
}
That will not only make the first (parent) li.active blue, it will also target any li.active nested beneath it. i.e. it will also make .primary-navbar ul li.active ul li.active blue.
Try something like:
.primary-navbar > ul > li.active {
background-color: blue;
}
The >s will only target the li.active that is directly under the ul that is directly under .primary-navbar
I'm working on a Wordpress site and am not fully following the html and css given to me.
I have a rule that says when a menu item is hovered, make the background of the line item orange and the nested anchor text white:
.dropdown > ul li:hover, .dropdown ul li.current_page_item {
background-color: rgba(255,165,0,0.4);
Then:
.dropdown ul li a, .dropdown ul a { // because there are nested drop down menus
display: block;}
The first rule works the second does not. Using the inspect element feature I notice that when I apply this rule it becomes scored out. When I apply the rule outline: solid 1px to see the nested anchor, it is indeed smaller than the parent line item when my goal is to make it match the size.
Here is the nav: http://jsfiddle.net/hfnjgjxf/
Notice that when you hover over the menu items the text only changes to white when you hover over the center (the inner a tag). The inner a tag should be the same size as the parent so that when hovered, the text turns to white, on any part of the line item.
Hope I'm talking sense. If you view the fiddle you'll see what I mean.
Since the list items don't have explicit width and/or height, we can't change the size of anchor tags properly to fill entire space of each list.
However, you could simply achieve that by adding the padding on anchor tags instead of the list items:
EXAMPLE HERE
.dropdown ul li {
/* padding: 7px 10px; */ /* Remove this declaration */
border: none;
border-right:2px solid lightblue;
background-color: transparent;
}
.dropdown ul li a {
display: block;
padding: 7px 10px; /* Add this instead */
}
It would not be required in this situation to make the anchor element the same size as its parent, but just to apply the effect to the anchor, based on the hover of the parent li. You can achieve that by changing the selector to match the li hover rather than the a hover.
.dropdown > ul li:hover > a {
color: white;
}
http://jsfiddle.net/hfnjgjxf/2/
www.pureelysium.com/Pure/index.html
Hi there
i tried removing the last both by using both the n-th child and the last-child like so
nav ul li a.last-child {border-right: none;}
I also tried
nav ul li:nth-child(n+3) {
border: 0;
}
Im stumped! Can anyone advise why this wouldnt work?
Your last-child syntax is incorrect. Should be:
nav ul li a:last-child {border-right: none;}
However, it won't work in your case. You have to use that one:
nav ul li:last-child a {border-right: none;}
last-child, nth-child and similar works always in context of parent, so nav ul li a:last-child looks for <a> that is the last child of it's parent: <li> in your case. But you'd like to select <a> within the last <li>. That's why you have to put :list-child after li, not the a.
I want to apply same style to
a, a:hover
of elements residing inside an id, class and element. What's the most valid and effective syntax?
Example:
#leftmenu .shortcuts ul li a, a:hover {
text-decoration: none;
}
Regards,
//t
CSS isn't that smart, so you'll have to explicitly write out that first part, again. As #sdleihssirhc noted, you can omit li, as ul elements are assumed to already contain lis, so the selector would still work:
#leftmenu .shortcuts ul a,
#leftmenu .shortcuts ul a:hover {
text-decoration: none;
}
I'd consider giving that ul an id, as it would condense your CSS considerably:
#lm_ul a, #lm_ul a:hover {
text-decoration: none;
}
or you could just do something similar to apply to all links inside a container with an id="leftMenu"
CSS:
#leftMenu > * a, #leftMenu > * a:hover{ .... }
HTML:
<ul>
<li><span><a>item1</a></span></li>
<li><p><a>item1</a></p></li>
<li><div><a>item1</a></div></li>
<li><em><a>item1</a></em></li>
</ul>
This will take into account every element a no matter what is wrapping the links inside the container with id="leftMenu"