I have two HTML lists I need one to select my "active" class and the other to ignore it.
Here is my css, I show an image "icon-plus.gif" and when user click the li the image change to "icon-minus.gif"
li:before {content: url("icon-plus.gif");}
li.active:before {content: url("icon-minus.gif");}
And then I have a two lists, and all the li show the image "icon-plus.gif" when I click it image change.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ul>
<li>Bread</li>
<li>Apples</li>
</ul>
both are showing the images!!! Really don't understand why, my idea it was having the class inside the li:
<ul>
<li class"active">Coffee</li>
<li class"active">Milk</li>
</ul>
Code was downloaded from internet.Thanks
Use JQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("li").click(function () {
// Remove active class from all li elements
$("li").removeClass("active");
// add the active class to your clicked on element
$(this).addClass("active");
});
</script>
javascript onclick() event and jquery's css manipulation may help you. Here is a useful link:
http://api.jquery.com/category/css/
Related
Currently I´m highlighting the active tab in my site with just a CSS class,
the problem is that I´m having more and more tabs and this list is getting bigger and every time I add a new tab I also need to add a new selector to the class
Is there a CSS only way to simplify this?
body.students li.students,
body.teachers li.teachers,
body.sports li.sports,
...,
... {
background-color: #000;
}
I´m adding the class to the body for each section
is there a way to do something like this with CSS?
body.[class] > li.[class] {
background-color: #000;
}
Basically I just want to add a property if both (body and li) have the same class
Example for students.html
<body class="students">
<ul>
<li class="students">students</li>
<li class="teachers">teachers</li>
</body>
In this example li.students is the one that will be highlighted
Example for teachers.html
<body class="teachers">
<ul>
<li class="students">students</li>
<li class="teachers">teachers</li>
</body>
In this example li.teachers is the one that will be highlighted
Thanks!
Change your HTML code - introduce a class "current_page" (or whatever you'd like to call it)
<body class="students">
<ul>
<li class="students current_page">students</li>
<li class="teachers">teachers</li>
</ul>
</body>
Or
<body class="teachers ">
<ul>
<li class="students">students</li>
<li class="teachers current_page">teachers</li>
</ul>
</body>
That way, you'll only ever need one selector:
li.current_page {
background-color: #000;
}
You could also do it in JavaScript if you don't like to change your HTML code:
var classname = document.querySelector("body").className;
var li = document.querySelector("li." + classname);
li.className = li.className + " current_page";
I've managed to put a great looking menu togheter!`
<li class="huvudmenu">Framsida</li>
<li class="huvudmenu">
<a>Om oss</a>
<ul>
<li>Styrelsen</li>
<li>Historik</li>
<li>Stadgar</li>
<li>Topeliuspriset</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li class="huvudmenu">Verksamhet
<ul>
<li>Hangö seminariet</li>
<li>Årsberättelser</li>
</ul>
</li>
<li class="huvudmenu">Estholmen</li>
<li class="huvudmenu">Bli medlem</li>
`http://jsfiddle.net/hx6uvc19/ The setup I have does not, unfortunatley, work very well on touch screen devices. Is there any way I can keep the design while making it touch screen compatible?
Thanks!
You can not use the :hover pseudo class on mobile. In order to get this effect you can use JQuery as stated by #jbutler483 in the comments.
If you wanted to do this you could do it by adding an .active class to the main li's (By using the class .huvudmenu) on click/touchstart and add this to the css where you have your hover styles as well.
This is the JQuery:
$('.huvudmenu').on('click touchstart', function(e){
e.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
});
and the styles to add are:
nav ul li.active > ul {
display: block;
}
and
nav ul li.active:after {
width: 100%;
background: #404040;
}
this will then allow the styles on click and touchstart events. If you wanted this to only run on mobile you could just remove the click and use touchstart events and/or put some kind of detection that this is a mobile device before initialising the JQuery function.
Here is an update to your fiddle: http://jsfiddle.net/lee_gladding/hx6uvc19/3/
I don't know how to do this: I want change color class = "dropdown-toggle" when I hover .dropdown-menu li
.dropdown-menu li:hover (or li > a) (~ or + or >) .dropdown-toggle {...} - its not working
Can I do it in CSS?
My code follows below:
<li class = "dropdown">
Lorem ipsum
<ul class = "dropdown-menu">
<li> Hellooooo </li>
<li class="divider"></li>
<li> Blablabla </li>
</ul>
</li>
There is currently no way to select the parent of an element in CSS.
If there was a way to do it, it would be in the CSS selectors specs, either CSS 2 or 3
CSS 3 Selectors Spec
CSS 2 Selectors Spec
You'll have to use js to do that.
EDIT: You could use the workaround that #Mr. Alien put in his answer.
I think you can also use Jquery for this.
jsFiddle
$(document).ready(function(){
var menuItem = $('.dropdown-menu li');
var itemToChange = $('.dropdown-toggle');
menuItem.on('mouseenter', function(){
itemToChange.css('background-color', 'red');
});
menuItem.on('mouseleave', function(){
itemToChange.css('background-color', '');
});
});
Hope this helps.
The best thing you can do here with pure CSS is
ul li.dropdown:hover > a {
background-color: red;
}
Demo
Over here, am selecting the anchor tag which is a direct child to li.dropdown on hover of the .dropdown which holds the sub ul
~ is for the following sibling selector.
How could il select the class .content in reference to the class .select ?
HTML
<ul>
<li> <a>content</a> </li>
<li> <a class="select">selected li</a> </li>
<li> <a>content</a> </li>
</ul>
<div class="content">
selected content
<div>
CSS (not working)
ul > li > a.select ~ .content {
/* something */
}
It's unfortunately not possible with CSS, but you could use JQuery, i.e. something like
<script type="text/javascript">
$(".selected").parent().parent().siblings(".content").css("color", "red");
</script>
$(".selected") you start at 'a' tag
.parent() move to parent 'li'
.parent() move to parent 'ul'
.siblings(".content") matches all siblings of the 'ul' you are currently at with class #content'
.css("color", "red") do whatever fancy css you like ;)
There's currently no way in CSS to select the class .content in reference to the class .select.
However if you change your markup a little you can do something similar to what you're trying to do using the target pseudo-class
FIDDLE
<style type="text/css">
#featured a:first-child
{
background-color:yellow;
}
</style>
<div id="featured">
<ul class="ui-tabs-nav">
<li><span>test 1</span></li>
<li><span>test 2</span></li>
<li><span>test 3</span></li>
<li><span>test 4</span></li>
</ul>
</div>
I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.
They are all highlighted because each a is the first-child of its parent li
What you probably want is something like:
#featured li:first-child a
{
background-color:yellow;
}
Because all anchors are the first child of their parents. You need to:
#featured li:first-child a {
background-color: yellow;
}
If you always have a list I would prefer the CSS solution like #powerbuoy and #danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/
The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.
Nevertheless when list-styling is your only task here then I would recommend the CSS solution.