Is it possible to show only the last x items in a list using pure CSS?
The following code snippet shows every item, except for the first 2. How do I only show the last two items in a list?
ul li {
display: none !important;
}
ul li:nth-of-type(2) ~ li {
display: inherit !important;
}
https://jsfiddle.net/mechskt2/
use :nth-last-of-type(-n+x) or :nth-of-type(n+x)
Simply use nth-last-of-type.
ul li:nth-last-of-type(2),
ul li:nth-last-of-type(2) ~ li {
display: inherit !important;
}
Related
I want to make a list with list-style-type: disc; to list some programs.
But the list-items don't get this "disc" and have scrollbars , i don't know why... look here (Link).
It just should be a list with the disc-icon and no scrollbars on the right for every list-tiem.
html:
<ul>
<li>flashtool</li>
<li>test</li>
</ul>
css:
ul {
list-style-type: disc;
}
The problem is in the declaration of the following class.
main > ul li
{
overflow:auto;
}
The above code will point the first level ul under main. That is perfect. But look at the next selector. It will select all the child-selector of li. This is wrong in your case. It should point only first level of li also. Update the code like below. It will work.
main > ul > li
{
overflow:auto;
}
The reason why your list-style-type is not working is the absence of list-style-position: inside. So your CSS need the following modification:
main > ul li .content > ul {
list-style-type: disc;
list-style-position: inside;
}
in your common.css line number 4
Use
.content ul{
list-style-type:disc;
list-style-position:inside;
}
if you want to remove scrollbar set overflow:hidden
I'm having a problem with bullet points appearing alongside images on this site: http://docomomo-uk.co.uk/
I've tried using this code based on other posts with similar issues:
div#featured-widget-post ul {
list-style-type: none !important;
}
but no luck. Any suggestions? All help much appreciated.
You don't have the list surrounded by ul tags and you're referencing the element incorrectly with something that isn't there. Wrap your li item with ul
after you wrap your elements correctly, reference it as such...:
.featured-widget-post ul li {
list-style-type: none;
}
Check with
.featured-widget-post li{
list-style-type: none !important;
}
You use id selector instead of class selector.
You don't have ul tags.
Try this:
.featured-widget-post li {
list-style: none;
}
Your code wasn't working because .featured-widget-post is a class (always preceded by a dot (.)) and not an id (preceded by a pound symbol (#)) - and your li tags are not wrapped in a ul.
Apply this css inside your page.
li {
list-style-type: none; docomomo-uk.co.uk #3(line 159)
}
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo
I am trying to select the sub-menu item from a Wordpress default sidebar menu, and I am trying to write a CSS selector for that. I thought I understand CSS selectors, but I don't know what is happening in this case.
The following ones are working:
.widget_nav_menu ul .menu-item .sub-menu { background: red; }
.widget_nav_menu ul .menu-item li { background: red; }
While this one doesn't work:
.widget_nav_menu ul .menu-item li .sub-menu { background: red; }
Can someone explain to me why can I not specify things to be more precise with both specifying class and type here?
Luckily at this level of customization I don't need to select things more precisely (I only want to hide sub-menu items), but can someone tell me how to make the non-working example work?
Here is a live site, but it’s the same on all Wordpress installs with TwentyTen theme and a multi-level menu on the left.
UPDATE: I think I got a big misunderstanding about the usage of spaces in CSS, so I asked a question here: usage of spaces in CSS files
BTW, after understanding the answers and realising what was wrong with my problem, the correct answer for my problem is:
.widget_nav_menu li.menu-item ul.sub-menu
try:
.widget_nav_menu ul .menu-item .sub-menu li { background: red; }
because sub-menu class belongs to ul and there is no sub-menu class after li
I believe you want this:
.widget_nav_menu ul .menu-item li.sub-menu { background: red; }
Try this :
.widget_nav_menu ul .menu-item .sub-menu li { background: red; }
Because the li item is below the .sub-menu ul...
if I set visibility:hidden on a nested li element, how do I set it back on hover?
eg.
#menu li ul li {
visibility: hidden;
}
I tried:
#menu li ul li:hover {
visibility: visible;
}
But it doesn't work - so clearly I haven't got the syntax right!
cheers
visibility: hidden hides the element and leaves no hoverable surface, so there will never be a hover event triggered.
Try opacity: 0 (or even opacity: 0.00001, not sure right now whether the surface remains with 0) to get the desired effect. Note that IE < 8 needs special treatment (filter: alpha(opacity=0))
Other browsers need other opacity settings as well, check out #Nick Craver's link for a full list.
Why not add a child wrapper in each <li> like this (could be a p or a div):
<li><p>dadada</p></li>
Then, for styling:
#menu ul li p {
visibility: hidden;
}
#menu ul li:hover p {
visibility: visible;
}