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
Related
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.
~ 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
I have the following html structure.
<ul>
<script id="agendaTmpl" type="text/x-jquery-tmpl">
<li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?session_id=${agenda_id}');">
</li>
</script>
<li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html? session_id=2');"> test</li>
<li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html? session_id=2');"> test</li>
</ul>
I need to apply class to the first li of the list.
The script tag cannot be removed, coz it is a template for the structure.
I tried with ul > li:first-child but it is not working. It works only if the li is the first child of the ul, i.e. if the script tag is not present.
Please suggest me a way to apply style to the first li of the ul.
Note: I am not allowed to add a new class to the first li.
Try using first-of-type instead:
ul > li:first-of-type
This is a CSS3 selector - so is not completely supported across older browsers. See #Boltclock's answer for much better cross-browser support
It works only if the li is the first child of the ul, i.e. if the script tag is not present.
Exactly.
Since you're using a jQuery template, and you're trying to manipulate the first li to give it a class without modifying the HTML source, you may as well do this all with jQuery:
$('ul > li:first').addClass('first');
There's also a trick for selecting all first items of adjacent lists of items:
li:not(li + li) {
background: #f00;
}
/* Or the more intuitive one: */
ul > :not(li) + li, ul > li:first-child {
background: #f00;
}
<ul>
<div></div>
<li>I'm selected</li>
<li>test</li>
<li>test</li>
<div></div>
<li>I'm selected</li>
<li>test</li>
</ul>
<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.