Obviously I must be doing something wrong, but I can't figure out what's wrong with this, it's driving me crazy.
The selector I'd LIKE to use is: .menu ul li:last-child > a
The 'unique selector' that firefox gives me is .menu > ul:nth-child(1) > li:nth-child(5) > a:nth-child(1)
the HTML is:
<div class='menu'>
<ul><li><a href=''>Home</a></li>
<li><a href='1'>Link 1</a></li>
<li><a href='2'>Link 2</a></li>
<li><a href='3'>Link 3</a></li>
<li><a href='4'>Link 4</a></li>
<ul>
</div>
How is li:last-child > a not selecting 'Link 4'? I am really quite confused, so thanks in advance for the upcoming lesson.
Simple, your closing ul tag is wrong.
<div class='menu'>
<ul><li><a href=''>Home</a></li>
<li><a href='1'>Link 1</a></li>
<li><a href='2'>Link 2</a></li>
<li><a href='3'>Link 3</a></li>
<li><a href='4'>Link 4</a></li>
</ul> //change this
</div>
Working Fiddle
Related
I've been trying to figure out a way to change the html structure of my web app using media queries so that my nav collapses into a drop down on the mobile site. It seems that the only way to change the actual markup is to use jquery, but I'd like to avoid that if possible.
I've looked all over but all of the suggestions ive tried online just cause more problems than it solves bc im using the materialize css framework for the site. Hopefully someone here has worked with materialize before and has solved the problem already.
Here is the html:
<nav class="nav">
<div class="nav-wrapper">
Game Swap
<ul id="nav-mobile" class="right">
<li><a id="homeMenu" href="#">Home</a></li>
<li><a id="searchMenu" href="#">Matches</a></li>
<li><a id="profileMenu" href="#">Profile</a></li>
<li><a id="loginMenu" href="#">Login</a></li>
<li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
</div>
</nav>
As of now, the nav works pretty well as all res until you get to about 620px wide, then the nav items start overlapping the logo.
Here's the materialize documentation if helpful.
Thanks for any help in advance.
UPDATE: I have succesfully used materialize to replace my nav with a hamburger nav. However, when clicked on desktop, there is no dropdown. It has occurred to me that maybe this hamburger nav is merely a button for mobile for side navigation to animate from the side onto the screen. If not, then there is somethign else wrong with the code. The documentation claims there is an "example below" but I dont see it. See here: http://materializecss.com/navbar.html#mobile-collapse
I have also initialized the jquery line at the end of document ready, so that shouldnt be the issue.
updated HTML:
<nav class="nav">
<div class="nav-wrapper">
Game Swap
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a id="homeMenu" href="#">Home</a></li>
<li><a id="searchMenu" href="#">Matches</a></li>
<li><a id="profileMenu" href="#">Profile</a></li>
<li><a id="loginMenu" href="#">Login</a></li>
<li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a id="homeMenu" href="#">Home</a></li>
<li><a id="searchMenu" href="#">Matches</a></li>
<li><a id="profileMenu" href="#">Profile</a></li>
<li><a id="loginMenu" href="#">Login</a></li>
<li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
</div>
</nav>
UPDATE 2: I decided to make the whole thing a drop down, using a different component altogether. See solution below for anyone with the same issue.
<ul id="dropdown1" class="dropdown-content">
<li><a id="homeMenu" href="#">Home</a></li>
<li><a id="searchMenu" href="#">Matches</a></li>
<li><a id="profileMenu" href="#">Profile</a></li>
<li><a id="loginMenu" href="#">Login</a></li>
<li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
<nav class="nav">
<div class="nav-wrapper">
Game Swap
<ul class="right">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
Yes it is for mobile, and hidden in desktop view, but you can show it but changing the view to block from none, check the following code:
#media only screen and (min-width: 993px){
nav a.button-collapse {
display: block;
}
}
Originally the display of .button-collapse on(min-width: 993px) is none;
Check the codepen I created, this is working fine.
http://codepen.io/adrianrios/pen/xgWWRO
This question already has answers here:
Problem with odd/even child elements in nth-child
(2 answers)
Closed 6 years ago.
I have a menu with a dropdown where i would like to have different colors on odd lines and applying css to achieve this.
so first line and third line is the same color and the second and fourth are another color.
this is my menu:
<ul class="nav navbar-nav">
<li><a title="home">home</a></li>
<li class="dropdown">
option <b class="caret"></b>
<ul class="dropdown-menu">
<li><a title="option1">option1</a></li>
<li><a title="option2">option2</a></li>
<li><a title="option3">option3</a></li>
<li><a title="option4">option4</a></li>
</ul>
</li>
</ul>
i have added oddChild class to every odd line which is color the line..but I would like to do something like
.dropdown-menu < odd {
background-color: white;
}
Is this possible?
nth-child makes this easy...
.dropdown-menu li:nth-child(2n) or .dropdown-menu li:nth-child(odd)
.dropdown-menu li:nth-child(2n) { background: #a00; }
<ul class="nav navbar-nav">
<li><a title="home">home</a></li>
<li class="dropdown">
option <b class="caret"></b>
<ul class="dropdown-menu">
<li><a title="option1">option1</a></li>
<li><a title="option2">option2</a></li>
<li><a title="option3">option3</a></li>
<li><a title="option4">option4</a></li>
</ul>
</li>
</ul>
Use the CSS pseudo-classes :nth-child(odd) and :nth-child(even)
.dropdown-menu > li:nth-child(odd) {
background-color: white;
}
.dropdown-menu > li:nth-child(odd) {
background-color: skyblue;
}
<ul class="nav navbar-nav">
<li><a title="home">home</a></li>
<li class="dropdown">
option <b class="caret"></b>
<ul class="dropdown-menu">
<li><a title="option1">option1</a></li>
<li><a title="option2">option2</a></li>
<li><a title="option3">option3</a></li>
<li><a title="option4">option4</a></li>
</ul>
</li>
</ul>
I had written a webpage utilizing class and id names for nearly all elements and realized this is probably not the most succinct way to accomplish my styling. I have been trying to move to a more "DOM Traversing" way of styling but there seems to be issues with one style overwriting another. For example my navbar looks like the following:
<nav>
<li class="navbar--link">Link 1</li>
<ul class="dropdown-custom" id="1">
<li><a style="color: black" href="#">Client 1</a></li>
<li><a style="color: black" href="#">Client 2</a></li>
<li><a style="color: black" href="#">Client 3</a></li>
<li><a style="color: black" href="#">Client 4</a></li>
</ul>
<li class="navbar--link">Link 2</li>
<ul class="dropdown-custom" id="2">
<li><a style="color: black" href="#">Peabody, MA</a></li>
<li><a style="color: black" href="#">Newton, MA</a></li>
<li><a style="color: black" href="#">Dallas, TX</a></li>
<li><a style="color: black" href="#">Houston, TX</a></li>
</ul>
<li>LOGO</li>
<li class="navbar--link">Link 3</li>
<ul class="dropdown-custom" id="3">
<li><a style="color: black" href="#">1</a></li>
<li><a style="color: black" href="#">2</a></li>
<li><a style="color: black" href="#">3</a></li>
<li><a style="color: black" href="#">4</a></li>
</ul>
<li class="navbar--link">Link 4</li>
<ul class="dropdown-custom" id="4">
<li><a style="color: black" href="#">A</a></li>
<li><a style="color: black" href="#">B</a></li>
<li><a style="color: black" href="#">C</a></li>
</ul>
</nav>
...and I was having trouble styling the a within the ul without also effecting the a outside the ul. I tried using many permutations nav > ul > li > a as well as the + selector, but was not having any luck. Is this something I am doing wrong or is there some other way to select ONLY the li within a ul?
The solution is exactly what you indicated in your question,
Try using 'direct child of' > ,
Try restart the browser and load the page to see if the changes take place.
Also the problem could be that some elements have been styled,
eg the li have inline styling which has the highest priority compared to external stylesheet.
nav > ul > li > a
{
text-decoration:none;
}
nav > li > a
{
color:green;
}
<nav>
<li class="navbar--link">Link 1</li>
<ul class="dropdown-custom" id="1">
<li><a style="color: black" href="#">Client 1</a></li>
<li><a style="color: black" href="#">Client 2</a></li>
<li><a style="color: black" href="#">Client 3</a></li>
<li><a style="color: black" href="#">Client 4</a></li>
</ul>
<li class="navbar--link">Link 2</li>
<ul class="dropdown-custom" id="2">
<li><a style="color: black" href="#">Peabody, MA</a></li>
<li><a style="color: black" href="#">Newton, MA</a></li>
<li><a style="color: black" href="#">Dallas, TX</a></li>
<li><a style="color: black" href="#">Houston, TX</a></li>
</ul>
<li>LOGO</li>
<li class="navbar--link">Link 3</li>
<ul class="dropdown-custom" id="3">
<li><a style="color: black" href="#">1</a></li>
<li><a style="color: black" href="#">2</a></li>
<li><a style="color: black" href="#">3</a></li>
<li><a style="color: black" href="#">4</a></li>
</ul>
<li class="navbar--link">Link 4</li>
<ul class="dropdown-custom" id="4">
<li><a style="color: black" href="#">A</a></li>
<li><a style="color: black" href="#">B</a></li>
<li><a style="color: black" href="#">C</a></li>
</ul>
</nav>
.dropdown-custom > li {
//style li here
}
This would style all li elements inside a div with the class .dropdown-custom, with the same style, while not styling any li elements outside the .dropdown-custom div.
I have the following HTML structure:
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>
I want to select #c via CSS. I have tried:
ol > li:not(.active):last-child > a {
border: 1px solid green;
}
As I understand it li:not(.active) selects all the li elements but the one with class .active.
On this selection I use :last-child to get the last of these li elements. But this wont work. What's wrong? Is it possible what I'm trying to achieve?
Thank you very much :)
PS: The list length is dynamic and the elements does not have any id that could be used for CSS selection (I just used some in the example to clarify which element I want to select) ;)
The pseudo code that you wrote works! There's no last-child of <li> with no active class. So your code fails any time! Check with another one in which, the last <li> doesn't have an active.
Or you need to use last-of-type. Check the fiddle:
ol > li:not(.active):last-child > a {
border: 1px solid green;
}
ol > li:not(.active):last-of-type > a {
border: 1px solid green;
}
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li class="active"><span>Not this</span></li>
<li><a id="c" href="#">This one</a></li>
</ol>
One thing to note is, last-of-type doesn't consider :not(). Check CSS: How to say .class:last-of-type [classes, not elements!]! You might need to use JavaScript or jQuery for this.
Partial Solution
If you know that the Not this always occurs in the last, you can use nth-last-child(2):
ol > li:not(.active):nth-last-child(2) > a {
border: 1px solid green;
}
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>
You could try the following CSS:
ol > li:not(.active):nth-last-child(1) > a,
ol > li:not(.active):nth-last-child(2) > a {
border: 1px solid green;
}
<ol>
<li><a id="a" href="#">Not this</a>
</li>
<li><a id="b" href="#">Not this</a>
</li>
<li><a id="c" href="#">This one</a>
</li>
<li class="active"><a id="d" href="#">Not this</a>
</li>
</ol>
<ol>
<li><a id="e" href="#">Not this</a>
</li>
<li><a id="f" href="#">Not this</a>
</li>
<li class="active"><a id="g" href="#">Not this</a>
</li>
<li><a id="h" href="#">This one</a>
</li>
</ol>
This code would work only if the last two can't have the active class at the same time. If they, at some point, both have the active class, this css would also fail.
Check this out: https://css-tricks.com/useful-nth-child-recipies/
If you want to select only second last child then you can try:
ol li:nth-last-child(2) a{
border:1px solid green
}
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>
I wrote a little generic menu and need help figuring out why second level links always display to the right of first level links. Code is kind of lenghty so here is a jsfiddle.
Here is the essentially what is happening.
<nav>
<ul>
<li><a href='#'>Link 1</a></li>
<li>
<a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
<li>
<a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
<li><a href='#'>Link 6</a></li>
<li><a href='#'>Link 7</a></li>
<li><a href='#'>Link 8</a></li>
<li>
<a href='#'>Link 8</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
</ul>
</nav>
Link 2 and Link 2 Sub Links hover to the right. I want Link 8 Sub Link to hover left. Right now it goes out of bounds of the wrapper div. Ideally, IF there is enough space (256px) to the right, hover right. If there is not, hover left. Top links at the far right should have sub links hover left.
Try this http://jsfiddle.net/zx8oyx2n/6/
HTML
<ul class="left" >
<li><a href='#'>Sub Link 1</a>
</li>
</ul>
CSS
.left{
right:0;
}
I used
nav ul li:last-child ul { right: 0; }
because I'm not really concerned about IE8 or less.