Can something like li:nth-child be used to style the first ten items in a list?
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
</ol>
so 1 to 10 will be fancy and 11 and 12 will be normal.
I'd rather not use a class if possible.
nth childs example:
:nth-child(-n+10)
this in works here: link.
more on understanding this check out this site.
I guess if you want IE support, i can't really make this any prettier. Atleast I don't know how with this cheap hack.
ul>li + li + li + li + li + li + li + li + li + li + li{
text-align: center; /*makes everything after 10 centered*/
}
http://jsfiddle.net/TzLqZ/ for an example of this above
Here is the IE way with first 10 being center and the last 2 being normal:
http://jsfiddle.net/TzLqZ/3/
ol>li{
text-align: center;
color: blue;
}
ol>li+li+li+li+li+li+li+li+li+li+li
{
text-align: left;
color: red;
}
I think you are looking for the nth child pseudo-selector seen here http://css-tricks.com/how-nth-child-works/
I think for what what you want to do:
select all but top ten:
ul li:nth-child(n+11){}
or just top ten:
ul li:nth-child(-n+10){}
should do the trick.
However, Internet Explorer does not support this at least until ie8 according to the article. So don't rely on it for anything critical (although I don't know what child specific styling would be critical).
Related
I've hided list decoration, because I'm making dropdown lists. But the issue that it still take empty spase where it was dot before, how may I solve it?
I've delite decoration. but issue is empty spase before li
li {
list-style-type: none;
}
Most user agent style sheets add default padding or margin to ordered and unordered lists. You'll have to remove that too:
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
For future reference, you can look at the elements in your page using your browser's developer tools (F12 by default) to see what CSS is being applied to them:
ul {
display: initial;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
The child selector should select the immediate children contained by an element. But in the following code, the selector div > ul > li select all descendant <li> of <div>. I have no idea why the child selector expands its scope?
div>ul>li {
text-decoration: underline;
color: blue;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 31</li>
<li>Item 32</li>
</ul>
</li>
</ul>
</div>
If you take a look at the page in Chrome or Firefox's developer tools, you'll see what's happening. The selector isn't applying to the further descendants—instead, they're inheriting the color from their parent.
By default, the color property isn't set. This is equivalent to setting color: inherit;—in other words, it means "since I have no special instructions, I'll do whatever my parent is doing". So when you set a color for an element, it'll also apply to all that element's descendants, unless any of them specify a color of their own.
#Draconis' answer is off to a good start, but the comments suggest there is no solution to the underlining. So here is a solution.
/* Set all list elements to a default value. change this to what you need it to be */
li {
color: black;
text-decoration: none;
}
/* Then set the inner ULs to full width inline-block; which will prevent the
text-decoration from inheriting into them */
div>ul ul {
display:inline-block;
width: calc(100% - 40px);
}
div>ul>li {
text-decoration: underline;
color: blue;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 31</li>
<li>Item 32</li>
</ul>
</li>
</ul>
</div>
I am trying to hide several menu items from my mobile menu using the nth-child selector in CSS.
Here is the source code HTML and CSS: https://jsfiddle.net/jf1r12wh/
The HTML is something like this:
<ul class="mobile">
<li>Item 1</l1>
<li>Item 2</li>
<li>Item 3</li>
<ul><li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li></ul></ul>
I want to use the nth-child (or similar) to hide Item 1 and 2 on the mobile menu, but I don't want it to hide Submenu item 1 and Submenu Item 2, which it's doing.
I'm using this:
.mobile li:nth-child(1){
display: none !important;
}
.mobile li:nth-child(2) {
display: none !important;
}
The problem is that it's applying this to the submenu as well. How can I make it not to do that, and only apply to the main menu items?
All you have to do is show that the rule should only apply to direct children via the use of >
Like this:
.mobile > li:nth-child(2) {
display: none !important;
}
As Paulie_D mentioned in his comment, this is a part of specificity.
EDIT:
Here is a working snippet:
.mobile li:nth-child(1){
color: red;
}
.mobile > li:nth-child(2) {
color: red;
}
<ul class="mobile">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
<ul>
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</li>
</ul>
For future reference, I would also like to point out that the correct semantic for a ul inside a ul is for the second ul to be inside it's own li
"The children (direct descendants) of a ul element must all be li elements". I've made sure that my code snippet reflects this for you.
This question already has answers here:
A CSS selector to get last visible div
(11 answers)
Closed 8 years ago.
Is there a way in CSS to apply CSS rules to a last visible child without knowing the class which makes an element invisible?
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="display: none">Item 5</li>
<ul>
<style>
ul > li {
border: 1px solid black;
}
// Remove right border from last visible child
// This does not work of course, but this is what I am looking for
ul > li:last-child:not([style="display: none"]) {
border-right: none;
}
</style>
To be clear: I'm looking for a rule-based selector not class-based in CSS not Javascript. But this answer A CSS selector to get last visible div for example does not work. The problem here is that :last-child and :not can not be combined. :last-child([style="display: block"]) also does not work (when li has dispay: block), because it looks at the style attribute and not at the CSS rule.
Example in bootstrap (NOTE: hidden-md is an example, it could also be an other class which uses display:none):
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="hidden-md">Item 5</li>
<ul>
It is not possible with CSS, however you could do this with jQuery. Try this clumsy code.
jQuery:
$('li').not(':hidden').last().addClass("red");
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="hideme">Item 4</li>
</ul>
CSS:
.hideme {
display:none;
}
.red {
color: red;
}
jQuery (previous solution):
var $items = $($("li").get().reverse());
$items.each(function() {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
From CSS it is not possible :)
maybe if you draw the right border from the left border of next element or next pseudo element , you get half of the job done :http://codepen.io/gc-nomade/pen/ohKwv/
/* basic and naive workaround for borders */
ul {
text-align:center;
}li {
display:inline-block;
padding:0 1em
}
li + li {
border-left:solid;
}
ul:hover li:nth-child(even) {/* test : hide every even lis at once */
display:none;
}
Ok, I'm stuck trying to solve this one with CSS only although I'm not entirely sure if it's possible, so before I resort to JavaScript I need to ask here.
I need to target a sibling with the class column-title of the first <li> in the following list:
<ul>
<li class="column-title">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="column-title">Item 4</li>
<li>Item 5</li>
</ul>
Consider that the sibling can be in any position, for example:
(5th spot)
<ul>
<li class="column-title">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="column-title">Item 5</li>
</ul>
(3rd spot)
<ul>
<li class="column-title">Item 1</li>
<li>Item 2</li>
<li class="column-title">Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
I don't think this is possible with CSS only, right?
Thanks.
EDIT--
Oh boy, I found the solution:
Use the sibling combinator: ~
.column-title ~ .column-title { background:#ddd; }
This way the property will be applied to ANY sibling of the first .column-title li.
PS. I found the answer at the same time crowjonah was posting his. I chose his answer as the selected answer anyway.
You can try the semi-supported "general sibling combinator", ~. Something like:
li.column-title ~ li.column-title {color: red;}
Here's a basic fiddle showing it being done.
And then you might need a shim like this for IE7 support, if that's up your alley.
Seeing your update, you should know that for best results, if you are excluding the first instance of li.column-title from your siblings rule, you should specify :first-child:
ul li.column-title:first-child {color: blue;}
ul li.column-title:first-child ~ li.column-title {color: red;}
How about using a not filter:
Here's a jsfiddle to demonstrate.
ul>li.column-title:not(:first-child) {
color: red;
}
Since it's css3, it won't be supported in pre IE9