is there a way i can select the previous link from the active link in css?
i want to apply a specific style to the link previous from the active link e.g. link 3 is the active link so i want to style just link 2:
<ul>
<li>link 1</li>
<li>link 2</li>
<li class="active">link 3</li>
<li>link 4</li>
<li>link 5</li>
<li>link 6</li>
</ul>
i know i can easily do this in jquery, but i want to know if there is away that this can be achieved in css.
those links are inline with eachother to make a the navigation menu of the website
Its counter intuitive, but can be done.
You need to reverse your items and float them in the opposite direction, then use the next sibling adjacency selector.
Demo Fiddle
HTML
<ul>
<li>link 6
</li>
<li>link 5
</li>
<li class="active">link 4
</li>
<li>link 3
</li>
<li>link 2
</li>
<li>link 1
</li>
</ul>
CSS
ul {
display:inline-block; /* <-- disguise the float:right position change */
}
li {
float:right; /* <-- re-reverse item ordering in DOM */
display:inline-block;
}
li.active + li a {
color:pink; /* <-- select the next sibling (which due to reversing the DOM elements is now the previous one */
}
Related
According to this well-rated SO post Proper way to make HTML nested list? the best-practice way to make a nested list is this:
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li> </ul>
however I'm having real problems styling a list made in this way. I want each item in the list to have a specific height but I can't use li { height: 40px; } because the height of the second li also includes all the inner list. See here for an example http://jsfiddle.net/rujg3zyk.
The problem comes down to the fact that the second outer li element contains both some plain text and a block display element. This seems like a 'code smell' to me.
what's the best way of formatting this list so that each line is 40px high?
Apply line-height instead of height
ul li {
background-color:yellow;
line-height:40px;
}
ul li li {
background-color:red;
line-height:40px;
}
height:40px will apply 40px for all the listed items, so that two clild 'li' wont fit inside the 40px of the parent 'li'
The way you have given here, is not a valid syntax:
<ul>
<li>List item one</li>
<li>List item two with subitems:</li>
<!-- Problem here... -->
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Final list item</li>
</ul>
You cannot nest <ul> directly under <ul> in this case. You need to do is:
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
And the above code is perfectly valid. You don't need to use a height but try using min-height. I strongly advice you against using height (as that has to be calculated by the contents).
Your code
Your code :
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
is correct you need some changes read below:
The nested list should be inside a <li> element of the list in which it is nested.
Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.
Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol.
The description list (HTML5 dl) is similar, but allows both dt and dd elements.
More Notes:
dl = definition list.
ol = ordered list (numbers).
ul = unordered list (bullets).
I don't know if this is what you are looking for, but you could use min-height instead of height:
ul li {
background-color:yellow;
min-height: 40px;
}
ul li li {
background-color:red;
}
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
Of course, it could expand to higher heights if there is more content, so that is why I am not sure if that is what you are looking for.
Hope this helps.
I am trying to hide several menu items from my mobile menu using the nth-child selector in CSS.
Here is the source code HTML and CSS: https://jsfiddle.net/jf1r12wh/
The HTML is something like this:
<ul class="mobile">
<li>Item 1</l1>
<li>Item 2</li>
<li>Item 3</li>
<ul><li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li></ul></ul>
I want to use the nth-child (or similar) to hide Item 1 and 2 on the mobile menu, but I don't want it to hide Submenu item 1 and Submenu Item 2, which it's doing.
I'm using this:
.mobile li:nth-child(1){
display: none !important;
}
.mobile li:nth-child(2) {
display: none !important;
}
The problem is that it's applying this to the submenu as well. How can I make it not to do that, and only apply to the main menu items?
All you have to do is show that the rule should only apply to direct children via the use of >
Like this:
.mobile > li:nth-child(2) {
display: none !important;
}
As Paulie_D mentioned in his comment, this is a part of specificity.
EDIT:
Here is a working snippet:
.mobile li:nth-child(1){
color: red;
}
.mobile > li:nth-child(2) {
color: red;
}
<ul class="mobile">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
<ul>
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</li>
</ul>
For future reference, I would also like to point out that the correct semantic for a ul inside a ul is for the second ul to be inside it's own li
"The children (direct descendants) of a ul element must all be li elements". I've made sure that my code snippet reflects this for you.
Can you please take a look at this demo and let me know how I can fix the left indent of the inner <ul> and get rid of the dropped gray area before the child red background?
<ul class="sidebar-navigation">
<li>List 1
<ul class="sidebar-inner-list">
<li> Link</li>
<li> Link </li>
</ul>
</li>
<li>List 2
<ul class="sidebar-inner-list">
<li> Link 2</li>
<li> Link 2</li>
<li> Link 2</li>
</ul>
</li>
</ul>
body{color:#fff;}
ul{list-style-type:none;}
li{background-color:#2d2d2d;}
li:hover{ background-color:#ccc;}
.sidebar-inner-list>li{ background-color:red; margin-left:-40px;}
http://jsfiddle.net/sQWE6/4/
ul { padding:0 }
Just remove the automatic padding from the list. I guess the real question here is why don't you just use <div>s? They don't have automatic padding, and you don't seem to want an actual list (list-style-type: none).
The ul list items has a padding-left by default, remove this and you should be good.
.sidebar-inner-list{
padding-left:0;
}
DEMO
Ok, I'm stuck trying to solve this one with CSS only although I'm not entirely sure if it's possible, so before I resort to JavaScript I need to ask here.
I need to target a sibling with the class column-title of the first <li> in the following list:
<ul>
<li class="column-title">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="column-title">Item 4</li>
<li>Item 5</li>
</ul>
Consider that the sibling can be in any position, for example:
(5th spot)
<ul>
<li class="column-title">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="column-title">Item 5</li>
</ul>
(3rd spot)
<ul>
<li class="column-title">Item 1</li>
<li>Item 2</li>
<li class="column-title">Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
I don't think this is possible with CSS only, right?
Thanks.
EDIT--
Oh boy, I found the solution:
Use the sibling combinator: ~
.column-title ~ .column-title { background:#ddd; }
This way the property will be applied to ANY sibling of the first .column-title li.
PS. I found the answer at the same time crowjonah was posting his. I chose his answer as the selected answer anyway.
You can try the semi-supported "general sibling combinator", ~. Something like:
li.column-title ~ li.column-title {color: red;}
Here's a basic fiddle showing it being done.
And then you might need a shim like this for IE7 support, if that's up your alley.
Seeing your update, you should know that for best results, if you are excluding the first instance of li.column-title from your siblings rule, you should specify :first-child:
ul li.column-title:first-child {color: blue;}
ul li.column-title:first-child ~ li.column-title {color: red;}
How about using a not filter:
Here's a jsfiddle to demonstrate.
ul>li.column-title:not(:first-child) {
color: red;
}
Since it's css3, it won't be supported in pre IE9
please help me to style this list , I need to set different background image for each list item, but class are same.
<ul>
<li class="sameforall">menu 1</li>
<li class="sameforall">menu 2</li>
<li class="sameforall">menu 3</li>
<li class="sameforall">menu 4</li>
</ul>
I know this one , but it works only for fist item :(
ul:first-child li{
/*my css*/
}
Why would you give all the li's the same class?
Give the ul a class to style the contained li's, then give the li's their own class, like so:
<ul class="sameforall">
<li class="one">menu 1</li>
<li class="two">menu 2</li>
<li class="three">menu 3</li>
<li class="four">menu 4</li>
</ul>
.sameforall {color: red;}
.sameforall .one {background-color: blue;}
.sameforall .two {background-color: green;}
.sameforall .three {background-color: pink;}
.sameforall .four {background-color: purple;}
You can't access the HTML, CSS3 supports :nth-child() psuedo selecting - http://css-tricks.com/how-nth-child-works/
<ul>
<li class="sameforall">menu 1</li>
<li class="sameforall">menu 2</li>
<li class="sameforall">menu 3</li>
<li class="sameforall">menu 4</li>
</ul>
.sameforall:nth-child(1) { background-color: blue; }
.sameforall:nth-child(2) { background-color: green; }
.sameforall:nth-child(3) { background-color: pink; }
.sameforall:nth-child(4) { background-color: purple; }
Note, this won't work in most old browsers.
I would avoid the use of first-child since it's not fully supported and where it is, it's probably still buggy. In regards to referring to the other elements or childs, your best shot would be to give them a different id and style them using it. Like this:
<ul class="sameforall">
<li id='first' >menu 1</li>
<li id='second'>menu 2</li>
<li id='third' >menu 3</li>
<li id='forth' >menu 4</li>
</ul>
Then you would refer to those elements in the css file like this:
#first{/*Your css*/}
If you want to see a list of support browsers for the nth-child visit this page it contains a table with some of the most popular browser versions and the support issues they may have with it.
you need :nth-child() btw it should be
ul li:fist-child
Since you can't change the markup and child selecting via CSS is not supported that well, the only way for you is to do it with JavaScript.
<ul>
<li class="sameforall">menu 1</li>
<li class="sameforall">menu 2</li>
<li class="sameforall">menu 3</li>
<li class="sameforall">menu 4</li>
</ul>
<script type="text/javascript">
var listItems = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var numChildren = listItems.length;
for(var i = 0; i < numChildren; i++) {
var item = listItems[i];
// -> do whatever you want with each item.
switch(i) {
case 0: item.style.backgroundImage = 'url(item-1.gif);'; break;
case 1: item.style.backgroundImage = 'url(item-2.gif);'; break;
case 2: item.style.backgroundImage = 'url(item-3.gif);'; break;
}
}
</script>
you need to go with the nth-child method.
Here the stuff is well detailed. Hope this will help you.
http://www.w3.org/TR/css3-selectors/