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/
Related
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.
This question already has answers here:
A CSS selector to get last visible div
(11 answers)
Closed 8 years ago.
Is there a way in CSS to apply CSS rules to a last visible child without knowing the class which makes an element invisible?
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="display: none">Item 5</li>
<ul>
<style>
ul > li {
border: 1px solid black;
}
// Remove right border from last visible child
// This does not work of course, but this is what I am looking for
ul > li:last-child:not([style="display: none"]) {
border-right: none;
}
</style>
To be clear: I'm looking for a rule-based selector not class-based in CSS not Javascript. But this answer A CSS selector to get last visible div for example does not work. The problem here is that :last-child and :not can not be combined. :last-child([style="display: block"]) also does not work (when li has dispay: block), because it looks at the style attribute and not at the CSS rule.
Example in bootstrap (NOTE: hidden-md is an example, it could also be an other class which uses display:none):
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="hidden-md">Item 5</li>
<ul>
It is not possible with CSS, however you could do this with jQuery. Try this clumsy code.
jQuery:
$('li').not(':hidden').last().addClass("red");
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="hideme">Item 4</li>
</ul>
CSS:
.hideme {
display:none;
}
.red {
color: red;
}
jQuery (previous solution):
var $items = $($("li").get().reverse());
$items.each(function() {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
From CSS it is not possible :)
maybe if you draw the right border from the left border of next element or next pseudo element , you get half of the job done :http://codepen.io/gc-nomade/pen/ohKwv/
/* basic and naive workaround for borders */
ul {
text-align:center;
}li {
display:inline-block;
padding:0 1em
}
li + li {
border-left:solid;
}
ul:hover li:nth-child(even) {/* test : hide every even lis at once */
display:none;
}
I am trying to make a webpage with a navigation functionality EXACTLY like this one: http://www.rex-ny.com/ where you click a list item and its children items appear and stay.
I can do it with hover, but I can't figure out how to make it stay when not hovering.
It seems like the most simple thing is the most difficult to do.
<ul id="menu">
<li>Menu 1
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
</ul>
Thanks
Here is a jsfiddle http://jsfiddle.net/phzuC/
Here is a CSS only solution as the OP requested, using tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/2/
#menu li > ul {
display:none;
}
#menu li:focus > ul {
display:block;
}
li {
outline: 0;
}
EDITED
Here is a jQuery solution should you ever need it. It keeps the submenus open and it's simple to implement. 11 lines of code.
DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/5/
$(document).ready(function() {
$(".nav-top > li").click(function(e) {
if($(this).find('ul').hasClass('expanded')) {
$(this).find('ul').removeClass('expanded').hide();
} else {
$(this).find('ul').addClass('expanded').show();
}
});
$('.nav-top a').click(function(e){
e.preventDefault();
});
});
Here is another CSS only solution that uses either:
Checkboxes if you want the menus to toggle on click
radio buttons if you want the menus to auto close when another is selected
Reference:
CSSTricks: Stuff you can do with the “Checkbox Hack”
The CSS Ninja: CSS Tree
Demo
Basic behavior CSS (the demo has more styling to remove the default list indentation/bullets):
.sideMenu input[type='radio'],
.sideMenu input[type='checkbox'] {
display: none;
}
.sideMenu input[type='radio'] + ul,
.sideMenu input[type='checkbox'] + ul {
position: relative;
display: none;
}
.sideMenu input[type='radio']:checked + ul,
.sideMenu input[type='checkbox']:checked + ul {
display: block;
}
HTML (can be arbitrarily deep):
<nav class="sideMenu">
<ul>
<li>
<label for="menu1">Menu 1</label>
<input id="menu1" type="checkbox" name="menu1">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<!-- repeat -->
</ul>
</nav>
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
I am using Cufon (http://cufon.shoqolate.com/generate/) to replace some text in a menu.
Problem is that I only need to style the first <li> of the first <ul>.
I have tried using:
Cufon.replace('#menu ul li > a', { fontFamily: 'Christopherhand', hover: { color: '#99c635'}});
With the > seperator, but it does not work. It still replaces the #menu ul li ul li a
This is my markup:
<div id="menu">
<ul>
<li class="current">
About JW
<ul>
<li>Subpage 1</li>
<li>Subpage 2</li>
<li>Subpage 3</li>
<li>Subpage 4</li>
</ul>
</li>
<li>Our Products</li>
<li>Best Recipes</li>
<li>Health & Diet</li>
<li>Our Ads</li>
</ul>
</div>
Can anyone see the problem? It should work without adding a class to sub <ul>. :-)
Thank you.
You can use:
Cufon.replace('#menu > ul:first > li:first > a');
but you have to include jQuery before cufon import in order to use such selector.
https://github.com/sorccu/cufon/wiki/usage