How can I use CSS selectors to apply a style only to the inner item in a list. Example:
HTML fragment:
<ul class="list">
<li>Item 1</li>
<li>
<ul class="list">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul class="list">
<li>Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS fragment:
ul.list {
border: 1px solid red;
}
What I need is to have a border only arround the "Subitem 1.1" string. The list is generated and it's not possible to add an extra class or id and as the list has no fixed depth it's not an option to specify an "ul > ul > ul.list" or similar selector.
I believe you cannot do this with only CSS if it is not possible to use an Id or unique class. In this case I think jQuery is the way to go:
$("li").children().eq( $("li").children().length - 1 ).
css('border', '1px solid red');
The idea is to use eq() to pinpoint the deepest child.
Hope this helps
it's not an option to specify an "ul > ul > ul.list" or similar selector.
Why not? This, or adding a class, is the solution.
You've basically specified a requirement to identify an element, then rejected all the approaches that you could use to do so.
<html>
<head>
<style type="text/css">
li.list {
border: 1px solid red;
}
</style>
</head>
<body>
<ul >
<li>Item 1</li>
<li>
<ul >
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul >
<li class="list">Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
I Hope This ma help you..
JoseSantos is correct in that it can't be done with pure CSS. Here's how I'd do it in jQuery:
$("ul").each(function(){
if ($(this).find("ul").length == 0)
$(this).addClass("list");
});
Related
I have a strong tag in ul tag, like,
<ul>
<strong>Whats included in strong tag</strong>
<li>li tag 1</li>
<li>li tag 2</li>
</ul>
The result shows in a website page, like
Whats included in strong tag li tag
1 li tag 2
I want to make the text of the strong tag(Whats included in strong tag) left-aligned to the position of li tag.
Except setting up margin value in strong tag, is there any other way to do it?
li.strong{
list-style-type: none;
}
.li1{
margin-left:30px;
}
.li2{
text-indent: 30px;
list-style-type:none;
}
.li2::before{
content:"• ";
}
.li3{
position:relative;
left: 30px;
}
.strong4{
position:absolute;
left:0px;
}
.li4{
position:relative;
top:16px;
}
.li5{
text-align:center;
list-style-type:none;
}
.li5::before{
content:"• ";
}
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li1">li tag 1</li>
<li class="li1">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li2">li tag 1</li>
<li class="li2">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li3">li tag 1</li>
<li class="li3">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong class="strong4">Whats included in strong tag</strong></li>
<li class="li4">li tag 1</li>
<li class="li4">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li5">li tag 1</li>
<li class="li5">li tag 2</li>
</ul>
Use margin left on the <li> elements instead of <strong> tag.
Use text indent
Use position relative on <li> tags or on <strong> tag.
Use position absolute on <strong> and position relative on <li>
Use text align
You can make the strong text an li with styling to remove the bullet and shift it left.
.nobullet {
list-style-type: none;
margin-left: -15px;
}
<ul>
<li class="nobullet"><strong>Strong Text!</strong></li>
<li>Other text!</li>
</ul>
It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc
<strong>Strong Text!</strong>
<ul>
<li>Other text</li>
</ul>!
I am searching for a way to have list items have alternating background colors. When there is a nested list the items keep alternating but the child is indented without having the background color of the parent flow down to its nested children.
It is not possible to apply classes. Also the amount of items is variable. Preferably it should work for an infinite amount of nested lists. But if that is not possible a cap on 3 depths (as in picture) should be enough. If it is easier to do by using divs instead of li and ul, that is also possible for me. I prefer pure HTML/CSS.
Because all my experiments did no good I can only supply a JSFiddle with the nested lists.
https://jsfiddle.net/qmdwpzt8/1/
<ul>
<li>Item 1
<ul>
<li>Item 1-1</li>
<li>Item 1-2
<ul>
<li>Item 1-2-1</li>
<li>Item 1-2-2</li>
</ul>
</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2-1
<ul>
<li>Item 2-1-1</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Here is one potential solution: https://jsfiddle.net/qmdwpzt8/3/
Not sure if all your requirements will be met by it, but I updated your list with div's:
<ul>
<li><div>Item 1</div>
<ul>
<li><div>Item 1-1</div></li>
<li><div>Item 1-2</div>
<ul>
<li><div>Item 1-2-1</div></li>
<li><div>Item 1-2-2</div></li>
</ul>
</li>
<li><div>Item 1-3</div></li>
</ul>
</li>
<li><div>Item 2</div>
<ul>
<li><div>Item 2-1</div>
<ul>
<li><div>Item 2-1-1</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Item 3</div></li>
<li><div>Item 4</div></li>
</ul>
And then add background colors with jQuery:
$( document ).ready(function() {
var b = true;
$( "div" ).each(function( index ) {
b = !b;
if (b) {
$(this).css("background-color", "#ff0000");
} else {
$(this).css("background-color", "#00ff00");
}
});
});
This does depend on jQuery/Javascript.
I try to make simple css-dropdownmenu.
My goal is to create a transition in which a dot transforms into a square if you hover over the main menu elements. With dot i mean a very small circle which cant be seen until hovered and then transforms into a square.
My menu is already able to transform the square into a circle with differant color but I cant think of a way to do it vice versa, especially because the circle first has to be 'hidden' until hovered.
Here is what i have so far:http://jsfiddle.net/eaqw4m38/3/
HTML:
Test
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<ul id="nav">
<li>Home</li>
<li>Menu 1
<span id="s1"></span>
<ul class="subs">
<li>Header a
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
<li>Header b
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2
<span id="s2"></span>
<ul class="subs">
<li>Header c
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
<li>Header d
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Google</li>
</ul>
</div>
</body>
I couldnt find anything via the search that fit my question.
Thanks in advance for your answers :)
Paul
EDIT: I now know how to add such a circle and make it transparent but how do i add it to the transition?
The problem is that i have to objects: 1. the square of the menuelement
2. the circle
How do I anymate the circle when the square is hovered and moreover i have to keep the font on top of the circle
Jsfiddle: http://jsfiddle.net/u2ykjdbo/
Just apply the border radius to elements at the start (when they are not hovered), and then apply the background and new color when the element is hovered while changing the border-radius to 0. As the color changes, you will see the transition from circle to square.
Code (unchanged selectors omitted):
#nav > li > a {
color: #333333;
display: block;
font-size: 1.3em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
border-radius: 50%;
}
#nav > li:hover > a, #nav > a:hover {
background-color: #EC7970;
color: #000000;
border-radius: 0;
}
at the moment, i am using the selectable JQUERY function
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
</style>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
but for some reason, when i select an element, the color will not change to bright orange but revert to the default gray of ui-state-default like below:
But if I go to the Chrome debugger and uncheck the background in ui-state-default in the style section, it works perfectly.
Is it because of this snippet:
var nodes = document.getElementById('selectable').getElementsByClassName('ui-widget-content');
if (nodes.length > 0)
{
nodes[0].innerHTML = getSymbol();
nodes[0].setAttribute("class", "ui-state-default");
}
How do i go around this problem, such that when i click on the element of interest, the color will change like i specified in the <style> tag.
With jQuery, this is quite simple.
$('.ui-widget-content') will select all of your LI elements. (alternately you could use $('#selectable li'))
$('.ui-widget-content').click(function() {
$(.'ui-widget-content').removeClass('.ui-state-default'); <-- this clears previous selections
$(this).addClass('.ui-state-default'); <-- this adds the class to the clicked item
})
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/