I have the following css which needs to alter the last-child which does not have the class "myClass" but I can't seem to get it to work.
Any ideas where I'm going wrong?
ul li:not(.myClass):last-child a {
font-style:italic;
}
Example html as requested:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li class="myClass">Extra</li>
</ul>
I want to apply the css to li three...
this can't be done with css only if you are capable to use jQuery you might find this solution helpful.
http://jsfiddle.net/6ku3Y/
$('ul li').not('.myClass').last().find('a').addClass('mystyle');
If you're sure the element you want to target is the last but one, you can use nth-last-child(2)
ul li:nth-last-child(2) a {
border-right:0px solid #000;
}
If you want to apply the css only to li three, Try :nth-child(3)
ul li:nth-child(3) a {
border-right:0
}
http://jsfiddle.net/hhncn/
This pseudo-class matches elements on the basis of their positions
within a parent element’s list of child elements.
– http://reference.sitepoint.com/css/pseudoclass-nthchild
Current CSS syntax is not capable of facilating an AND operator to perform this kind of style. What you need is the CSS LESS Framework.
This will allow you to do this:
ul > li:not(.myClass) {
li:last-child {
//style here
}
}
Try something like this:
ul li:not(.myClass):nth-last-of-type(2) a {
border-right:0px solid #000;
}
SEE DEMO
Related
How do you change styles of another element based on whether the first element is empty.
<ul></ul>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
In the above code, I want to give a style for the second ul { color:red } (to be more exact the ul that follows) ONLY if the first ul is empty.
Is there a pure CSS solution for this?
You can do this, but only if the element in question is completely empty- yes, not even a whitespace.
http://jsfiddle.net/NicoO/uTJ4N/
ul:empty + ul
{
color: red;
}
To be more accurate, this is the selector you need for the first empty <ul> of the body and the exact following <ul>:
body > ul:first-of-type:empty + ul
{
color: red;
}
http://jsfiddle.net/NicoO/uTJ4N/1/
Try this code:
ul > li {
color: red;
}
Its selects the ul which has a li as child element. And those can be colored red then.
http://jsfiddle.net/keypaul/KfaQv/1/
ul:not(:empty) {
color:red;
}
I dont think a pure css solution is the way to go, but you can use a pre-processor as they allow you to pass conditional statements.
Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?
But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.
Is there any way to do this without JS or something?
I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.
The code I tried, as you can see in the fiddle:
Relevant HTML
<ol>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ol>
CSS I have tried (without success)
/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}
Here is a possibility using the counter-reset / counter-increment properties:
ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
counter-increment:list;
content:counter(list, lower-alpha) ". ";
color:red;
}
see fiddle: http://jsfiddle.net/jRVH5/14/
For future generations: Newest addition to browsers (FF68+, Ch80+)
::marker {
color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
Style the bullets/characters of a list by using either ol or li CSS properties. Then use a span tag inline to change the actual list item text to be something different if you like.
li {
color: green;
}
span {
color: black;
}
http://jsfiddle.net/jRVH5/9/
I have a structure:
<div id="div">
<ul class="ul">
<li class="li_one">
</li>
<li class="li_two">
</li>
</ul>
</div>
I want to set background:red to the second li element (class "li_two") using pseudo-selectors and want to begin from the most outer div. I'm trying to this way:
#div > ul:nth-child(1) { background:red; } // works but wrong, sets background to ul
#div ul:last-child { background:red; } // doesn't set to any element
#div ul:first-child { background:red; } // again sets to ul but not to li
#div [class=li_two] { background:red; } // only this one works fine
Is it possible to set style to li_two from #div using :nth-child or :last-child or :first-child selectors? How to do it?
#div li:last-child
Your 2nd option was almost right :) I think you misunderstood what last-child does. xx:last-child It doesn't select the last child element of element xx; it selects every xx element that is the last child of it's parent.
Some reading.
I've created a JSFiddle for you to test it
:nth-child() and the other pseudo-classes should be applied to the child elements, not the parent. Apply those pseudo-classes to the lis:
#div ul li:last-child {
background: red;
}
I have the following menu:
<ul class="top-menu">
<li><a_href="/Products" title="Products"><span>Products</span></a><ul>
<li><a_href="/Products/List" title="Product List"><span>Product List</span></a></li>
</ul>
</li>
<li><a_href="/Customers" title="Customers"><span>Customers</span></a></li>
</ul>
and I also have a sprite for the top menu items (products, customers).
How is it possible to make the menu's top level links display the images ?
thought about css nth-child selector
ul.top-menu
{
list-style: none;
width:528px;
}
ul.top-menu li a
{
display:block;
float:left;
height:40px;
background-image:url(../Images/sprite-menu.png);
text-indent:-9999px;
}
ul.top-menu:nth-child(1) a
{
width:135px;
background-position:0 0;
}
but it is not working.
thanks.
nth-child selectors are set on the child element, not the parent
To make your example work, I used the nth-child selector on the li rather than the ul, like so:
ul.top-menu li:nth-child(1) a
{
width:135px;
background-position:0 0;
}
And of course the "<a_href" tags in your sample HTML should read "<a href" with no underscore.
you probably want to chain child selectors
To achieve the effect I believe you want, which is to have only the top-level items get the style, I would use CSS Child Selectors instead:
/* desired top-level-only styles go here */
ul.top-menu>li>a
{
width:135px;
background-position:0 0;
}
i have list like that:
<ul>
<li><a...>...</a></li>
<li>...</li>
</ul>
where both type of listelements are there multiple times in arbitrary order.
Is there a way to format those li's differently? (different list-style-image) The only difference is that the one kind contains a link and the other one doesnt.
No, there is no way in CSS to specify a selector depending on the child elements.
You would have to add something to distinguish the li elements themselves, like a class on all li elements that contains links.
If you can use jQUery, you could add the class to the li elements that contains anchor tags:
$('li:has(a)').addClass('linkItem');
A non-jQuery solution could look like this:
var items = document.getElementsByTagName('LI');
for (var i=0; i<items.length; i++) {
if (items[i].getElementsByTagName('A').length > 0) {
items[i].className = 'linkItem';
}
}
sure. If you give each different li a class you can do it simple. Or you can always do this if you can't use classes.
ul li
{
styles....
}
ul li a
{
styles....
}
The styles in the first class will apply to all li elements and styles in the second class will apply to the < a > tags respectively.
You can't do this with CSS alone, you could use Javascript to accomplish this. Here's an example using jQuery:
$('ul li a').each(function() {
$(this).parent().css('list-style-image', 'url("/path/image.gif")');
});
This will set the style for the li tags, not the a tags. Technically, the list-style-image property is supposed to be set for ul tags, not li, but most (all?) browsers handle it the way you would expect when you style the li tags individually.
Hello there
I would add a <p></p> tag like this:
<ul>
<li><a...>...</a></li>
<li><p></p></li>
</ul>
And then apply 2 different styles like this:
ul a {display:block; padding:3em; background: #ccc;}
ul p {display:block; padding:3em; background: #aaa;}
I would not recommend using javascript for this, some people block javascript ect. but it depends. I would perfer css/html.
Edit:
For some reason you can write <p></p> without making it code - Fixed
Also I might have overlooked that you wanted to apply list-style-image, then this will not work.
This is what classes are for. In HTML:
<ul>
<li class="linked"><a...>...</a></li>
<li>...</li>
</ul>
and in CSS
ul li {...}
ul li.linked {...}