<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.
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 have multiple nav ul li a that i need to style different and I have no good way of doing this. I've looked around the net for quite a bit but i do not understand how to do this without using class="" in every element. My code is below. There must be a better way of doing this? Like all children that has class="loginmenu" should be like x and all children of class="dropdownmenu" should be like y. Even if they are the same element.
<nav class="loginmenu">
<ul class="loginmenu">
<li class="loginmenu">
<p>Login</p>
</li>
</ul>
</nav>
<nav class="dropdownmenu">
<ul>
<li class="gigs">
<p>Gigs</p>
<p class="subtext">Shows & Gigs</p>
</li>
<li class="music">
<p>Music</p>
<p class="subtext">Tracks & Sets</p>
</li>
<li class="booking">
<p>Booking</p>
<p class="subtext">Booking & Contact</p>
</li>
CSS:
nav.loginmenu {
position: absolute;
}
li.loginmenu{
font-size: 25px;
margin-left: 1200px;
} and so on...
You can use nav.loginmenu <element>.
nav.loginmenu li {
font-size: 25px;
margin-left: 1200px;
}
For more information see the documentation of CSS selectors or try CSS Selector tester.
CSS rules can represent a hierarchy. For instance, the following means: "Apply this rule to all li elements that are inside a nav element with class loginmenu")
nav.loginmenu li {
..
}
It's commonplace for me to add classes to one root element that has no rules of its own, but for which having that class affects behavior of its children.
When sharing functionality, it is also common to add one class to multiple elements, or multiple classes to one element (separated by spaces) if it simply represents certain behavior (eg, applying a margin to all list elements to give them a "tabbing" look)
Additionally, many properties (most of the font-... properties for instance) are inherited from parent to child unless they're overridden at a lower level, so there's no need to repeat those for further descendants.
Not exactly sure what you are trying to do here. But if I'm interpreting correctly, you want to target different elements within each <nav> element? If so you can add an id which should be unique (not repeated) to your <nav> element then target the element like so:
html:
<nav id="loginMenu">
...
</nav>
css:
#loginMenu li {
font-size: 25px;
margin-left: 1200px;
}
Or you can use Genhis answer.
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
~ 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.