I have a div structure like the bottom:
<div class="body-content">
<div class="col-middle">
</div>
</div>
What I want to do is set a style on list items within the body-content class and make sure it does not apply to anything within col-middle
I thought it would be something like...
.body-content li { }
but it applies those styles to list items within col-middle too.
The simplest and most backwards compatible option is:
div.body-content li { /* some style */ }
div.col-middle li { /* some other style */ }
You might be able to use the child selector:
div.body-content > ul li
but it's not supported in IE6.
Other than that, it depends on exactly how your markup is written and what your requirements with respect to browser support are.
If possible, change your markup to:
<div class="body-content">
<div class="col-middle">
...
</div>
<div class="col-other">
...
</div>
</div>
or something similar so you can easily distinguish between which list you want to style.
I would then ZERO out the .body-content .col-middle li { }'s
AFTER styling the .body-content li { }'s
Your only other option is to specify where the li is going to be:
.body-content .li-block li { }
The code you tried specifies how list items ONLY inside .body-content should look, even if they are inside .col-middle.
Using CSS2 there isn't any way to do what you want, appart from specifying how list items outside .col-middle should work, and then specifying how they should be styled inside .col-middle.
Using CSS3 however, you can do something like this:
:not(.col-middle) li{}
Note that this does not work in any IE browsers.
You need:
.body-content > ul li { ... }
This will only select list items that are direct descendants of a ul in .body-content.
Edit: Ooops, wrong place for the > !
Edit: Sorry, also should have mentioned - child selectors don't work in IE6.
You should use, which will put the style only for the sons li of .body-content
.body-content > ul li {}
Restyle the col-middle.
div.body-content li {
color: red;
}
div.col-middle li {
// overrides stuff
color: black;
}
Styles cascade on down from parent elements to their children.
The example below seems to work the best (I've added some extra markup to demonstrate this), but I'd recommend styling .body-content and then override those styles in .col-middle. It would be the most cross-browser compatible.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.body-content > *:not(.col-middle) li {
color: red;
}
</style>
</head>
<body>
<div class="body-content">
<div class="col-middle">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>
Related
So I have some code that looks like:
<ul>
<li>
<ul>
<li> ... </li>
</ul>
</li>
</ul>
This has indented itself. I have no styling to indent this. According to the computed styling there is no margin-left, yet everything is actually indented, I guess this is the default behaviour of nested ul elements?
Regardless, on every nested ul, I have a class that is called comment-children I need to say only 5 down can indent (so .comment-children .comment-children .comment-children .comment-children .comment-children done, great) but at a width of 640px, all nesting must be turned off.
The part I am having the trouble with is that the ul elements are nested by default http://jsfiddle.net/d7az0jv3/
What do you want to do
Remove all default nesting and let me nest it my self via the class comment-children
At 640px remove all nesting.
Your example is insufficient to demonstrate what you want to do involving the class comment-children, but generally, to remove the indentation on lists across browsers, you should implement the rules
ul, li { margin-left: 0; padding-left: 0; }
Here's an updated jsfiddle
If you want to only nest elements up to a certain level, my recommendation would be to apply a class to the base ul that sets the indentation, and then add a rule that stops the indentation at a certain depth below that base class. Here is an updated version of your code with the nesting stopping at level 5.
HTML:
<ul class="comment">
<li>level one</li>
<li>
<ul>
<li>level two</li>
<li>
<ul>
<li>level three</li>
(etc., up to level seven)
CSS:
ul {
list-style:none;
}
ul, li { /* reset the margin and padding */
margin: 0;
padding: 0;
}
.comment ul {
/* 1 em margin for the UL elements under .comment */
margin-left: 1em;
}
.comment ul ul ul ul ul {
/* stop the nesting! */
margin-left: 0;
}
jsfiddle for this
When I'm trying to select all direct child of a parent element using ">", it works with some properties like border and all, but not with font-properties like color, font-weight etc..
My HTML is
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
CASE1 CSS:
ul>li {
color:#F00;
}
But here the color:#F00 property gets applied to all the "li" elements, But i want it to get applied only for the direct "li"s of "ul".
CASE 2
CSS:
ul>li {
border: solid 1px #000;
}
This one works well for me and the border gets applied only to the direct li child only.
I know it can be resolved by overriding with some other classes and all. But i want to know, why some css properties get inherited and others not.
It's happening due to the default inheritance capability of certain CSS Properties. Values of these kind of properties will be transmitted to the child by default.
This document from W3C gives detailed list of inheritance in various CSS properties. Full property table
try this
Demo
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
css
ul > li {
color:#F00;
}
ul > li > ol > li {
color:#000;
}
try this
ul > li ol li {color:black;}
As the listing element has been inheriting the color property from its parent, you need to override it.
You can add below style before yours as like
li {
color: #000;
}
ul>li {
color:#F00;
}
It overrides the color: inherit value.
I think you might find the answer you need here: http://www.w3schools.com/cssref/sel_firstchild.asp
You should be able to select these elements with
ul:first-child {
// css
}
Hope this helps
I am adding an anchor tag inside ul and inside anchor tag I am adding li. But when I tested this on html validator it gives me error. Is there a proper way to achieve this?
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul>
<li>Click one</li>
<li>Click one</li>
<li>Click one</li>
</ul>
</body>
</html>
Convert it to these:
<ul>
<li>Click one</li>
<li>Click one</li>
<li>Click one</li>
</ul>
Because li should always have a parent of ul, that is the cause of your error. But I think you wanted your whole li to be clickable so this CSS style will fix it.
ul li a { display:block; }
That will display it.
This question is very old but I want to add something to it:
This CSS should also force the anchor element be the same width and height of the parent li which would achieve the desired effect as well.
ul li a {
width:inherit;
height:inherit;
}
The whole li will be clickable if you style up the li a, like this:
ul li a {
float: left;
margin: 5px;
padding: 5px;
background: red;
}
You should be putting <li> tags outside the <a> tags not the other way round.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
I'm just trying to create another dropdown menu effect within a dropdown menu.
Observe:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascript/class-lib.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Parent 02
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
<div class="clear"></div> <!--".clear" div is nested within the .selected class, outside of the <ul>. Does this provide a buffer??? -->
</li>
<li>Parent 03
<ul>
<li><a name="child" href="#">Child 04</a>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
</ul>
<div class="clear"></div>
</li>
<li>Parent 04</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>>
CSS:
#nav li ul li a:hover{
#nav li ul li ul li a{
visibility:visible; /*<-- the only reason why I did that was to see if something like this would actually work. It doesn't. I gotta say I'm really not a fan of this language. While I'm sure there were reasons for not implementing this kind of method and design/scripting pattern, it seems like there are just as well plenty reasons TO implement it. */
}
}
#nav li ul li ul{
display:block;
list-style:none;
}
#nav li ul li ul li{
float:right;
clear:both;
width:50px;
height:100px;
background:#000;
}
#nav li ul li ul li a{
visibility:hidden;
color:#fff;
}
The only reason why I did that was to see if something like this would actually work. It doesn't. I gotta say I'm really not a fan of this language. While I'm sure there were reasons for not implementing this kind of method and design/scripting pattern, it seems like there are just as well plenty reasons TO implement it.
Why does CSS not allow me to nest selector blocks?
Instead of doing:
#nav li ul li a:hover{
#nav li ul li ul li a{
visibility:visible;
}
}
It should be:
#nav li ul li:hover ul li a
{
visibility:visible;
}
You can't nest statements. It's just not the right use for CSS.
From Wikipedia:
Cascading Style Sheets (CSS) is a
style sheet language used to describe
the presentation semantics (the look
and formatting) of a document written
in a markup language. Its most common
application is to style web pages
written in HTML and XHTML, but the
language can also be applied to any
kind of XML document, including plain
XML, SVG and XUL.
CSS isn't a scripting language like JavaScript, so it doesn't behave like one. It just tells the browser what to display and how to display it. That's just the main purpose of it.
There are ways, though, to do what you want in pure CSS. While you can't nest rule declarations, you can still apply them in nifty ways:
element subelement {
display: none;
}
element:hover subelement {
display: block;
}
That's the basic logic behind a dropdown menu in pure CSS. Think of :hover as a thing which adds a class to the element being hovered and work from there.
If you want a full tutorial, here's a promising one: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Other people have shown you how to fix the problem, but you shouldn't really be doing it that way anyways; although it is a nice and clean way to create menus, it crosses the boundaries in the content-presentation-behaviour rule. Although it may not matter much, the code that drops down menus belongs in JavaScript.
I thought this would be an easy thing, but I haven't found a good solution (maybe I'm also using the wrong search terms).
I would like to style an ordered list so the items appear so:
1
Item one
2
Item two
3
Item three
Is there any way to do this simply with CSS?
Many thanks in advance!
You can try along the line of:
<style>
ol {
list-style-position: inside;
padding-left: 0;
}
</style>
<ol>
<li> <div>foobar</div></li>
<li> <div>wah la</div></li>
</ol>
It works on FF and Chrome, but I don't have IE on my current machine to try.
You can use the content property with the :before pseudo-element and the \a newline escape:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OL Test</title>
<style type="text/css">
li:before {
content: "\a";
white-space: pre;
}
</style>
</head>
<body>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
</body>
</html>
That should work fine on browsers that support CSS 2.1.
AFAIK, CSS does not allow you to have a lot of control regarding the position of the list-item relative to the "bullet" (or number or whatever)... So it might be a better idea to generate the numbers directly in the HTML, on server-side, or on client-side via Javascript...
Nevertheless, the following works (at least in Firefox), but is rather ugly (with that br in the middle :-/ )
<html>
<head>
<style type="text/css">
li > p{
margin-left:-30px;
margin-top:-10px;
}
</style>
</head>
<body>
<ol>
<li><br/><p>item 1</p></li>
<li><br/><p>item 2</p></li>
</ol>
</body>
</html>
The idea is to force the content of the list-item to be on another line with a br, and then, on the content, apply some negative margins to move it where you want to... This is certainly not a nice solution ... in addition, I think that each browser may generate the "list-index" in its way, so there would be no nice way to have it work on all browsers ...
I know this question is really old, but I ended up finding it when searching for the same answer, and these answers provided didn't quite do what I needed it to do. I had also just learned this really cool technique using the "counter" in CSS.
ol {
/* Remove default numbers */
list-style: none;
counter-reset: item;
}
ol li {
/* Increment the counter for this element */
counter-increment: item;
/* Style the vertical spacing as needed */
display: block;
margin: 1em 0;
}
ol li:before {
/* Add the numbers as content in the before pseudo */
content: counter(item);
/* Continue styling as needed, changing, fonts, position, etc. */
display: block;
margin-bottom: 1em;
}
<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
Does it absolutely have to be an ordered list?
If you are dynamicaly generating the content, then you could always output the numbers yourself, and then format the markup however you like - rather than trying to coerce the browser by doing something 'clever', simplify the situation by doing someting 'smart'