I have this code :
<ul class="a">
<li class="b">hhhh</li>
<ul class="c">
<li class="d">Home</li>
<li class="d">hsos</li>
<ul class="c">
<li class="b">Home</li>
<li class="b">Home</li>
</ul>
When i display it the second li has a margin by default. What i want is that all that list to have the same margin.
There is a default padding-right in ul elements that you can remove using this CSS class:
ul {
padding-left:0;
}
Example
Related
In my code, there are list items and they all have a category. Each categories are sequentially added for each list items.
Here is my HTML:
HTML
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
CSS
ul li{display:none}
ul li.A:nth-of-type(1){display:block}
ul li.B:nth-of-type(1){display:block}
ul li.C:nth-of-type(1){display:block}
I am trying to display only the first element of each category. I am expecting below output:
A1
B1
C1
Here is my fiddle - https://jsfiddle.net/9pdby6st/200/
I observed that nth-of-type works only when the very first element is that category.
Here are the limitations:
Cannot change html structure
Cannot use javascript
Can use SCSS. Any advice?
You could use the adjacent sibling selector + for the elements that end with a class name and start the next tag with another class name.
Eg: .A + .B {display: block}
In the above case, only one instance is possible and the first element with the classname B displays and the other siblings are hidden.
You could use it to create many combos such as .B + .C {display: block} and so on.
JSFiddle link
ul li {
display: none
}
ul li.A:first-child {
display: block
}
ul li.A+.B {
display: block
}
ul li.B+.C {
display: block
}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
As seen here: https://stackoverflow.com/a/8539107/1423096
You can set the property for all the items and then undo it for the siblings that come after the first one.
ul li {
color: red
}
ul li.A:nth-of-type(1) {
color: blue
}
ul>li.B {
color: green
}
ul>li.B~li.B {
color: red
}
ul>li.C {
color: yellow
}
ul>li.C~li.C {
color: red
}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
Try this (inspired by alo Malbarez answer)
ul li{display:block}
ul>li.A~li.A {display: none}
ul>li.B~li.B {display: none}
ul>li.C~li.C {display: none}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/
The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
I want to have text aligned left and right inside the same <li> element in nav-list of Twitter Bootstrap. Here's my code:
<ul class="nav nav-list">
...
<li class="active">All<p class="pull-right">100</p></li>
<li>Warning<p class="pull-right">100</p></li>
<li>Error<p class="pull-right">100</p></li>
...
</ul>
And here is how it looks:
EDIT:
Thanks all for replies. Solved this problem in such way:
replace <p> with <span>
add class="clearfix" to <li> alements
OPTION ONE: CHANGE THE MARKUP:
Just change your markup a bit. Put the <p> outside of the anchor tag.
<ul class="nav nav-list">
<li class="active">All<p class="pull-right">100</p></li>
<li>Warning<p class="pull-right">100</p></li>
<li>Error<p class="pull-right">100</p></li>
</ul>
.pull-right {float:right;}
OPTION TWO: CHANGE THE CSS:
Otherwise if the <p> is needed inside of the anchor tag then you could do something like this.
a {
display:block;
width:100%;
}
p{ float:right;}
EXAMPLE: (note I am using a css reset in my example)
http://jsfiddle.net/vRSMZ/1/
HTML:
<ul class="nav nav-list">
...
<li class="active"><label>All</label><span>100</span><div class="clr"></div></li>
<li><label>Warning</label><span>100</span><div class="clr"></div></li>
<li><label>Error</label><span>100</span><div class="clr"></div></li>
...
</ul>
CSS:
.nav-list ul li a{ padding:5px 10px; display:block;}
.nav-list ul li a label{ cursor:pointer; display:block; float:left; width:80%;}
.nav-list ul li a span{ cursor:pointer; display:block; float:left; width:20%; text-align-right;}
.clr{ clear:both;}
Note: Adjust the width of text in the left on label and numbers on the right on span accordingly.
HTML:
<ul class="nav nav-list">
...
<li class="active">All<span class="num">100</span></li>
<li>Warning<span class="num">100</span></li>
<li>Error<span class="num">100</span></li>
...
</ul>
CSS:
.num{
float: right;
}
I changed your <p> to <span> because that makes more sense... Then added a .nums class to the span, and floated that right.
i creat a dropdown list when mouse hover at #clim the height of #dropdown change from 0 to 150px . but the code not work .
html code
<div id="menu">
<ul>
<li id="index">Accueil</li>
<li id="clim">Climatisation</li>
<li id="ventil">Ventilation</li>
<li id="electro">Electromenager</li>
</ul>
</div>
</div>
<div id="dropdown" >
<ul>
<li id="index">Climatisation</li>
<li id="clim">Ventilation</li>
</ul>
</div>
CSS code
#dropdown{
margin-left:693px;
width:165px;
height:0px;
position:absolute;
background:#158DFB;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
i have a problem in this part . not working
#clim:hover #dropdown{
height:150px;
}
first of all, your code has extra finishing tags and 2 elements with the same id (#clim), that doesn't make the question very clear.
to make this work with css and no javascript you have to include the hidden element (the dropdown) inside the outer element that you will hover and trigger the dropdown to be shown.
try this instead and then add the remaining css rules you need:
<div id="menu">
<ul>
<li id="one">Accueil</li>
<li id="two">
Climatisation
<ul id="dropdown">
<li id="subone">sub Link</li>
<li id="subtwo">Another sub link</li>
</ul>
</li>
<li id="three">Ventilation</li>
<li id="four">Electromenager</li>
</ul>
</div>
#dropdown{
height: 0;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
#menu:hover #dropdown{
height:150px;
}
when mouse hover at #clim the height of #dropdown change
You cannot do that with pure CSS, because there is no parent selector.
I have the following structure for a navigation …
<ul role="navigation">
<li class="page_item page-item-2">
Sections
<ul class="children">
<li class="page_item">One</li>
<li class="page_item">Two</li>
<li class="page_item">Three</li>
</ul>
</li>
<li class="page_item page-item-6">
About
<ul class="children">
<li class="page_item">Contact</li>
<li class="page_item">Members</li>
<li class="page_item">Become Member</li>
<li class="page_item">Whatever</li>
</ul>
</li>
</ul>
How can I hide the first appearance of each <a> inside the outer list elements?
In my case I'm talking about Sections and About
I thought
ul li > a { display:none; }
or
ul > li > a { display:none; }
should be doing the trick, but it hides everything.
That's because all the as are children of lis which are children of uls.
Your top-level ul has a role="navigation" so you can select that:
ul[role="navigation"] > li > a { display:none; }
I think the easiest and the most efficient way would be to add class like .hidden {display: none;}, but you could also add a class to the outer ul, and then:
.ul-outer-class > li > a { display: none; }
It's also more efficient than using attribute selectors.