I have a list of sub-lists. Each sublist has its own children. I need to apply style to all except the last sub-list. I use:
.list:not(:last-child) > .sublist {
color: red;
}
But it is applying for all the sublists. Here's a demonstrating code (fiddle:
http://jsfiddle.net/8m72m53r/3/):
:not(:last-child) > .row {
color: red;
}
<ul class="box">
<li class="row">One</li>
<li class="row">Two</li>
<li class="row">Three</li>
</ul>
<ul class="box">
<li class="row">FOur</li>
<li class="row">Five</li>
<li class="row">Six</li>
</ul>
<ul class="box">
<li class="row">Seven</li>
<li class="row">Eight</li>
<li class="row">Nine</li>
</ul>
Here you go - you pretty much had it, just make sure to use the :last-of-type pseudoclass
.box:not(:last-of-type) > .row {
color: red;
}
<ul class="box">
<li class="row">One</li>
<li class="row">Two</li>
<li class="row">Three</li>
</ul>
<ul class="box">
<li class="row">FOur</li>
<li class="row">Five</li>
<li class="row">Six</li>
</ul>
<ul class="box">
<li class="row">Seven</li>
<li class="row">Eight</li>
<li class="row">Nine</li>
</ul>
This might help you:
.box>.row:not(:last-of-type)
I'm not sure if you are looking for this. But if you want to style all items but the last ones, use something like this:
.row:not(:last-child) {
color: red;
}
Related
For a filetree that is dynamically generated, I set the width to 360px and a scroll on the x.
I know, the syntax is not correct, (nested ul should be in li ) but I am still wondering why the hhhhh in code below is not at the right side of the |- but under it. And the iiiii and further also...
.tree {
width: 360px;
overflow-x: scroll;
}
.li-tree {
list-style: none;
}
<div class="tree">
<ul class="ul-tree">
<li class="li-tree">|-<span>aaaaa</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>bbbbb</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ccccc</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ddddd</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>eeeee</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>fffff</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ggggg</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>hhhhh</span></li>
<ul class="ul-tree">
<li class="li-tree">|<span>iiiii</span></li>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</div>
You can see in the fiddle that hhhhh is not right of the |- anymore, but under it: https://jsfiddle.net/a9fudsb6/5/
Its because of your width there is no space for your tree.
If you change it e.g. to
width = 400;
it appears inside.
If you want to keep your width, add the following:
.tree {
width: 360px;
overflow-x: scroll;
white-space:nowrap; // that one here
}
I want to remove the bullet point for this code. tried many ways but no luck. any help?
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
.widget ul li{ list-style-type: none;}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
As the div container only list contact information, I'd recommend styling the elements using the wpcw-widget-contact class as it has a great fit with the context.
.wpcw-widget-contact ul {
list-style: none;
}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
You also might be interested to look up more details about the CSS property used on this answer.
I'm using bootstrap 2.3 for menu links
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li class="active">My profile</li>
<li>Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Is it possible to place two links (My profile and edit) in one line by using bootstrap like showed on picture or any other way to do it. Thanks.
You can achieve this with just CSS, using the nth-child selector. It is still responsive.
li:nth-child(1), li:nth-child(2) {
display:inline-block;
}
DEMO: http://jsfiddle.net/z5pXh/3/
nest another ul inside and a little additional css
CSS
ul.nav-edit {
margin-bottom: 0;
}
ul.nav-edit li.active {
display:inline-block;
width: 88%;
}
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li>
<ul class="nav nav-pills nav-edit">
<li class="active">My profile</li>
<li class="pull-right">Edit</li>
</ul>
</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Check out the fiddle at http://jsfiddle.net/Y2LUZ/
Live Demo
If fixed sizes are good for you, you can use this:
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked pos-rel">
<li class="col-first active">My profile</li>
<li class="col-second">Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
CSS
.pos-rel {
position: relative;
}
.col-first {
width: 300px;
}
.col-second {
position: absolute;
top: 0;
left: 305px;
}
I'm trying to create a horizontal list, something like this
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li>
<a>Foo Bar</a>
</li>
</ul>
</nav>
The problem is that with only 1 li element it works (like this ) but with 2 the first li item is not positioned correctly (like this )
Can someone explain to me whats happening?
UPDATE: remove type with class 'active' on anchor!
No need to use absolute positioning. Just do as following:
li.active a {
color: #abc522;
padding: 20px 40px 13px;
width: 146px;
background-color: white;
}
fiddle
Remove the class active from the first list item tag.
<nav class="tabs">
<ul>
<li> <-- Here
<a class="active">Bar Foo</a>
</li>
<li>
<a class="active">Foo Bar</a>
</li>
</ul>
</nav>
OR
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li class="active">
<a>Foo Bar</a>
</li>
</ul>
</nav>
How would I style a <li> element with id="mathi" so that I can stylize a menu with three elements?
I would like to give each one a separate background in both parent and child menus.
<ul id="MyMenu">
<li id="mathi">info 1
<ul class="inner">
<li>apple1</li>
<li>mango1</li>
<li>banana1</li>
</ul>
</li >
<li id="mathi">info 2
<ul class="inner">
<li>apple2</li>
<li>mango2</li>
<li>banana2</li>
</ul>
</li>
<li id="mathi">info 3
<ul class="inner">
<li>apple3</li>
<li>mango3</li>
<li>banana3</li>
</ul>
</li>
</ul>
You can't have multiple elements with the same id. If you need each of the lists to have similar formatting with slight differences then you could apply a class to each element.
<ul id="MyMenu">
<li id="math1" class="math">info 1
<ul class="inner">
<li>apple1</li>
<li>mango1</li>
<li>banana1</li>
</ul>
</li >
<li id="math2" class="math">info 2
<ul class="inner">
<li>apple2</li>
<li>mango2</li>
<li>banana2</li>
</ul>
</li>
<li id="math3" class="math">info 3
<ul class="inner">
<li>apple3</li>
<li>mango3</li>
<li>banana3</li>
</ul>
</li>
</ul>
then for CSS:
.math{
/* common formatting */
}
#math1{
background-color: ...;
}
#math2{
background-color: ...;
}
#math3{
background-color: ...;
}