I have:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I want to add a different width to each li.
I don't want to do it inline.
How can I target each li using CSS2 (not CSS3)?
Is there a way or do I need to give each li a class name?
Thanks
Why not use nth-of-type
ul li:nth-of-type(1){} /* First */
ul li:nth-of-type(2){} /* Seconds */
and if you're worried about older browsers, there's a great library that adds CSS3 pseudo-classes to them.
The only CSS2 way would be to add classes to each LI.
EDIT
Actually the different classes per LI isn't the only CSS2 way. #Hashem Qolami comment to the original question has a decent CSS2 solution, but like he says, it looks a little silly.
you can also use comb css as you have to add class for each li in CSS
e:g-
li {}
li + li {}
li + li + li {}
li + li + li + li {}
li + li + li + li + li {}
By "each li" do you mean each li element individually? if so, the nth selector might be your friend, though it is CSS3.
You can give class names to all your li and set to display block, with float.
Sample fiddle:
li{
display:block;
float:left;
background:blue;
}
li.small{
width:50%;
}
li.big{
width:100%;
}
If you want to use pure CSS2, you have to give them class names. This could be accomplished with the :nth-of-type() psuedoclass selector but that is a CSS3 feature.
This would be very simple to do with jQuery as well (if you want to avoid relying on CSS3 but don't want to add class names to your markup). This also would have the advantage of allowing you to dynamically change the widths as needed (rather than hard-coding property values as CSS classes).
Related
I'm adding a gallery feature to my blog and the gallery looks like this.
<ul id="pikeme" class="pika-thumbs">
<li>image</li>
<li>image</li>
</ul>
The gallery plugin gets is styling from .pika-thumbs li - however there is also the default blog styling .text ul li that is also applying its effects on the gallery - which I don't want. Is there a way to exclude .text ul li styling from the gallery?
Thanks!
You could use :not, e.g:
Change
.text ul li
To
.text ul:not(#pikeme) li
Or
.text ul:not(.pika-thumbs) li
More on :not from MDN
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector, or any pseudo-elements.
Demo
use the ID selector #pikeme li to override the .text ul li
As ID selector has greater priority than class selector.
css
#pikeme li { /* instead of .pika-thumbs li */
color: red;
}
I have a simple menu styled with css.
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
Is it possible to apply specific style to li element, containing a with active class.
I've tryed something like this:
#container > ul > li a.active < li {
custom: style;
}
Not possible with CSS. Though this can be achieved with scripting.
Similar question here.
Apply CSS styles to an element depending on its child elements
No, selectors can't match in reverse. In such circumstances the best approach is to simplify the matter.
A elements can be styled as block level elements, so simply push down whatever styles you had on the parent LI to the A elements. You already have your specific selector a.active, that should be distinct enough that you can style them appropriately.
#container ul li a.active{ yourstyle:styleproperties;}
or I think you may want to do like this
#container ul li a:active{ yourstyle:styleproperties;}
if you want dynamically add class to element you can use javascript and jquery
http://api.jquery.com/addClass/
$("#container ul li a").addClass("active");
and for parent(this class will be added for li element which is parent to a.active element)
$('#container ul li a.active').parent().addClass("active");
there is already similar topic Target outer div based on class of inner a
Try this:
ul li a.active{ color:green;}
http://jsfiddle.net/Vloxxity/VZgQx/
Edit:
i've read your comment,
this is only possible if you mark the li with a active class.
So if I have a CSS class named "class-name", what does the following mean?
.class-name {
margin: 0;
}
And why, if I had the following HTML
<div id="some-id">
<ul>
<li class="class-name">
...
would the selector
#some-id .class-name ul li
not exist?
.class_name means select elements with that class.
#some-id .class-name ul li means "select the li elements that are within ul elements that are within elements with the class 'class_name' that are within in the inner html of the element named 'some-id'"
The first one means what you probably think it means: Any HTML element with the class class-name will have a margin of 0 width (for each side, ie. top, bottom, left and right).
The second question is a bit more subtle. This selector
#some-id .class-name ul li
Applies only to an li that is found under a ul, found under an element with a class of class-name, found under an element with id some-id.
You would have to use a selector like this to apply to the HTML you have above:
#some-id ul li.class-name
Note that there is no space between li and .class-name in that selector. Specifying li.class-name means "an li with the class name class-name", whereas li .class-name (with a space) would mean "element with class class-name found below an li".
#some-id ul li.class-name
is prob what u need..
#some-id .class-name ul li
targets li descendants of ul descendants of the class name under #some-id
Because the class-name is on the li not as an element wrapping the li.
To clarify:
<div id="some-id">
<div class="class-name">
<ul>
<li>
Would match the selector string you mention.
.class-name specifies an element that has the class class-name. The selector #some-id .class-name ul li specifies a li that's a descendent of ul that's a descendent of some element with the class class-name that's a descendent of #some-id. To specify a particular kind of element that has the class class-name, you would do tag.class-name — for example, div.author-credit.
That selector expects a ul and li under an element with .class-name. Your HTML structure matches the following selector
#some-id ul li.class-name
You've got the selector out of order, to select the li's that are "class-name" classes would be:
#some-id ul li.class-name
Just skip using selectors in most cases. It makes the css easier to write read and use. also your programmer. Yes you can use them to apply CSS but that what classes are for the ID is for scripts to find elements and replace them or other programs to retrive info from them etc.
You can really screw things up, now or in the future by using the id's for CSS.
When I have
<ul class="menu">
<li>link</li>
</ul>
how do I make the LI-tag change a property (e.g. list-style-image) when is hovered (a:hover)?
You can apply hover to the li as well:
ul.menu li:hover
{
list-style-image: url(highlight.gif);
}
Note (Thanks to Andy E): :hover is not supported in IE6, and supported for links only in IE7. (See compatibility table here). There is a workaround for IE6 and 7 named whatever:hover.
On modern browsers you can use li:hover but on older ones you would have to use javascript.
Edit: By the way, if you set:
a {
display:block;
}
you can do all the styling on the a and you don´t need to style the li.
You can give add directly into anchor element which is sub element of li element
li a:hover { ..style.. }
Or you can add a class for anchor to do that
li a.HoverClass:hover { ..style.. }
There is a basic example here
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 {...}