~ 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
Related
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>list</title>
<style type="text/css">
li.mainList:hover li.childList{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="mainList">111</li>
<li>111
<ul>
<li class="childList">222</li>
<li class="childList">222</li>
</ul>
</li>
<li>111</li>
<li class="mainList">111</li>
</ul>
</body>
</html>
I want to change color my nested list items whenever user hover on first child and last child of main list. Why my above code does not work and what is your suggestion with first-child (last-child) selectors?
Because you are not correctly using the selectors. From your markup, this should work.
li.mainList:hover + li li.childList{
color:red;
}
Here is the working fiddle.
Why my above code does not work
Because you have used a descendant combinator and the nested list is not a descendant of the element being hovered.
what is your suggestion with first-child (last-child) selectors
To not use them.
You can't walk back up the tree to get a hover on the last child to affect the descendants of one of its previous siblings using CSS.
Use JavaScript (a mouseover listener) instead.
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
Having the following structure:
<ul>
<li>
<div><span class="node">Content1</span></div>
</li>
<li>
<div><span class="node">Content2</span></div>
</li>
<!-- but also: -->
<li>
<div><span class="node">Content3</span>
<ul>
<li>
<div><span class="node">Content on 2nd level</span></div>
</li>
</ul>
</div>
</li>
</ul>
Now I want to select all span elements with the CSS class node which are on the first level of the hierarchy. How to do that without also matching the last span on level 2?
Edit: The div tags are just for demo purposes. They can change to span or even be nested within another div. I don't want to get a brittle CSS selector out of this (web testing), so I do not want to use direct child selectors. Furthermore, I cannot make changes to the HTML code myself.
You can use > selector:
#parent > ul > li .node
Or, if you haven't parent id:
ul > li :not(ul) .node
You will need to start from the parent of the top-level ul and work your way down using child selectors. For example, assuming the parent element is identified by #parent:
#parent > ul > li > div > span.node
If the hierarchy of elements between the li and the span.node is not fixed, then things get a little more complicated. In order to avoid matching the inner span.node elements, you will need to make some assumptions about the markup, since a simple descendant selector like the following will always return every span.node since every nested list occurs as a descendant of your top-level li elements:
#parent > ul > li span.node
Fix/Ammend your html code, simple is better.
Working fiddle
<div><span class="node test">Content2</span></div>
add 2 class names to your span
.node.test {
color: red;
}
points to the right span
<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.
<div id=menu>
<ul>
<li class="section-title">auto-text1</li>
<li class="section-title">auto-text2</li>
<li class="section-title">auto-text3</li>
</ul>
</div>
How can I give special treatment to auto-text3 through css?
See section 6.6.5.7. of the CSS3 - future - proposal:
:last-child pseudo-class
Same as :nth-last-child(1). The :last-child pseudo-class represents an element that is the last child of some other element.
ul > li:last-child { }
http://www.w3.org/TR/css3-selectors/#last-child-pseudo
(In your example </menu> probably is meant to be the closing </div>.)
For the time being I guess it's still best to use classes marking the first and last list element, or simple Javascript on your #menu id.
You could use the :nth-of-type() pseudo-class selector:
#menu > ul > li.section-title:nth-of-type(3)
This will select the third element of all li elements with the class section-title.
Just to clarify the other answers, there aren’t (currently) any CSS selectors that let you select an element based on its content.