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.
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 having trouble trying to understand why there is a selector after the :hover pseudo class, and not before it. How and why does this work?
This works
div li:hover > ul
{
display: block;
}
Why wouldn't this work?
div li > ul:hover
{
display: block;
}
I've done many searches trying to figure out why to put a selector or selectors after it( :hover pseudo class); and the details of how it targets it, but I just can't seem to find any information about it. Thank you in advanced!
Your selectors are logically different.
li:hover > ul matches a ul inside of a hovered li.
li > ul:hover matches a hovered ul inside any li.
Your uls are probably hidden by default, so li > ul:hover isn't going to match anything.
In contrast, li:hover > ul matches the still-hidden ul as soon as the li is hovered, and shows it.
im trying to construct my own navigation bar, Ive seen some forum with (css), and then im stuck of this css line,
#navbar li:hover ul, #navbar li.hover ul {
i know that the #navbar is the id name,#navbar li:hover ul i think this code said when you hover the mouse in li the ul change and became like this:display: block;position: absolute;margin: 0;padding: 0;. this one is my problem? #navbar li.hover ul whats the meaning of this, then what about on dot(.) before the hover? can some one explain this line , #navbar li.hover ul
I could guess that the rule #navbar li.hover ul was defined for IE6(and previous).
Since that browser doesn't support :hover pseudoclass for elements different than links, probably there is some javascript defined for that browser that is toggling the .hover class on mouseover/mouseenter event.
#navbar li:hover ul
this one means: "the UL inside a hovered LI inside something with ID navbar."
#navbar li.hover ul
this one means: " the UL inside a LI having class 'hover', inside something with ID navbar."
The comma between them means that the following CSS rules apply to both cases.
the "dot" means that it is the class of the li.
I've been reading about this everywhere, and from what I've read to select a list without selecting the nested list. I need to have this
.myclass > ul > li
//or even just
ul > li
I've been trying to get it to work unsuccessfully. The selector is selecting everything, including the nested list. What am I missing?
Please see the code on JS Bin:
http://jsbin.com/asipap/4/edit
some CSS styles are inherited from parent elements unless another style explicitly overrides it, you've set the color for all the list items, but haven't overridden it for any other matched selector. Simply adding li { color: black } should solve the issue.
You need to select the ul that are inside an ul?
.cats, .cats ul{list-style-type:none;}
.test li ul > li{color:red;} /* li ul: an ul inside a li */
This select all nested list, maybe you want to use > to limit the deep.
See it here http://jsbin.com/asipap/16/
This li element matches the .test > ul > li selector. Therefore, all text inside that li will be red, including the ul inside the li.
<li>Test 1.1
<ul>
<li>nested</li>
</ul>
</li>
ul li:last-child selects the last element of a list.
ul li:not(...) selects an element that is not something
What is the CSS selector for excluding the last child of an element? I tried ul li:not(last-child) but it didn't work.
Did you try:
ul li:not(:last-child)