Currently i have a css snippet as follows:
ul.grid, ul.grid > li {
margin: 0;
padding: 0;
list-style-type: none;
}
can someone explain to me what is meant by
ul.grid, ul.grid > li ?
Correct me if i am wrong, ul.grid says that grid is a class? Can i some how use id instead of class?
ul.grid means a ul element with class grid.
ul.grid > li means an li element which is a direct child (and not a further descendant) of a ul element with class grid.
The comma separating the two means that the following rules will be applied to elements matching both selectors, so in other words, they will be applied to the ul and all of its children li elements.
Can i some how use id instead of class?
Yes. Replace the . with a # and make sure the elements have an id:
ul#grid, ul#grid > li { ... }
That would apply to, for example:
<ul id="grid">
<li></li>
</ul>
To use ID instead of class, replace the . with a # and use the ul ID:
ul#ulID, ul#ulID > li
ul.grid means any ul tag which also has a class of grid.
ul.grid > li represents any li tag which is a child of a ul tag which has a class of grid.
Related
I have a nested list and I'm having trouble styling the last level UL.
<ul class="same-class">
<li>
<ul class="same-class">
<li>
</li>
</ul>
</li>
</ul>
What I need is to display the first UL items inline, and below them show their children as blocks. The problem is both UL have the same class (I can't change the HTML output, nor add classes), and I can't find the proper selector to target the second UL.
In the example here I tried adding a diferent class to menu 3 and 4, and that does the trick, but since changing class isn't an option I need to find a workaround to make the children display as blocks.
Can someone take a look and advise?
ul ul li { display: block; } or .same-class .same-class li { display: block; } should do the trick - that'll select all li that are a child of two or more ul or .same-class
This might be useful (attribute selectors) depending on what your real code looks like (most likely useful if you're using AngularJS or something similar) or the nth-child might be good too because I'm not 100% sure what you mean.
Hope this helps!
If you try plugging this in, you should be able to target the various components as you like.
The first selector is targeting all list items that are direct children of the first menu.
The second one is targeting any lists inside of a list item which itself is a direct decendant of the menu class.
The third one is targeting just your list items in your nested lists. It gives a good degree of control for adjusting the layout.
ul.menu:first-of-type > li{
display:inline-block;
}
.menu > li ul {
display:block;
}
.menu:first-of-type > li > ul > li {
display:block;
}
If you was to use CSS parent selectors then try;
ul.same-class li {
display: inline-block;
}
li > ul.same-class li {
display: block;
}
The > in the second rule will select all ul.same-class li elements where it has a li as a parent.
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.
I've been reading about this everywhere, and from what I've read to select a list without selecting the nested list. I need to have this
.myclass > ul > li
//or even just
ul > li
I've been trying to get it to work unsuccessfully. The selector is selecting everything, including the nested list. What am I missing?
Please see the code on JS Bin:
http://jsbin.com/asipap/4/edit
some CSS styles are inherited from parent elements unless another style explicitly overrides it, you've set the color for all the list items, but haven't overridden it for any other matched selector. Simply adding li { color: black } should solve the issue.
You need to select the ul that are inside an ul?
.cats, .cats ul{list-style-type:none;}
.test li ul > li{color:red;} /* li ul: an ul inside a li */
This select all nested list, maybe you want to use > to limit the deep.
See it here http://jsbin.com/asipap/16/
This li element matches the .test > ul > li selector. Therefore, all text inside that li will be red, including the ul inside the li.
<li>Test 1.1
<ul>
<li>nested</li>
</ul>
</li>
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What does “>” mean in CSS rules?
I came across many many websites and I saw many of them use this type of notation in their css file for creating navigation bar like :
#navigation ul li > ul {
/* some code in between */
}
but when i omit the > sign as
#navigation ul li ul {
/* some code in between */
}
this still works the same way.
what is the difference and when to use > sign ?
> Means the direct child of a selector, so
li > a will ONLY match an <a> which is directly inside an <li> for example.
If the html was <li><span><a> the <a> would not be matched.
Removing the > will match any <a> nested inside an <li>, irrespective of other things around it, so li a would match the <a> in
<li><a> but also in <li><span><a>, for example.
Here's more information on direct Child selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
The > means a child element - it is the child selector. That is, directly / immediately nested after.
So, in your first example, the ul at the end of the selector must be directly descending from the li.
The "li > ul" syntax specifies that the ul must be a child of li. "li ul" instead says that the the styled ul is descendant of li, no matter how many levels below.
selector[1] > selector[2]{
[property]: value
}
This is called the child selector. In browsers that support it, it applies the styles to selector2 child elements of selector1.
Edit:
The second one you use I believe is called the Descendant selectors.
They should work identically, but it's there's a little difference. The decendant selector will apply to ALL decendants ,whereas the child selector applies only to the direct children of the parent.
You would use > when you want to target a direct descendant.
For example, .foo > .bar would target .bar only if it is the direct child, while .foo .bar would target any descendant of .foo that has the class .bar.
> is to be used when the second operand/element is a child of the first operand/element. When it's omitted; descendants are matched, which includes children.
Therefore, if your HTML is structured as you suggested (#navigation ul li ul) then if you have the following in your CSS:
#navigation ul {color:red;}
Then both #navigation ul AND #navigation ul li ul will be coloured red (the text) as they BOTH are descendants of #navigation ul.
But if you had the following in your CSS:
#navigation > ul {color:red;}
Then only #navigation ul would be coloured red as it is the only ul which is a direct child of #navigation
The ">" selector is the child selector, space is the descendant selector. If tag3 is inside of tag2, which is inside tag1, and you use a child selector, then your css rule won't apply to tag3 if you refer to tag3 inside of tag1, however, if you use the descendant selector, tag3 will be transitively inside tag1. This means that he descendant selector is more general than the child selector.
#navigation ul li > ul {
/* some code in between */
}
is more specific than
#navigation ul li ul {
/* some code in between */
}
because between the li tag inside the ul tag inside the tag with the id of navigation needs ul to be a direct child in the first example and in the second example ul doesn't need to be directly the child of li, li might have a child which is the parent of ul.
> is the child selector.
It will only select immediate children of the previous element. If it there is a
#navigation ul li ul li ul
element it will not be affected by the
#navigation ul li > ul
selector. But the
#navigation ul li ul
will be.
EDIT: #Nix is right, but he isn't telling the whole truth it seems. *Why isn't the p-enclosed ul ignored but only the span-enclosed? display: block vs inline perhaps? Who knows?
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 {...}