I have a nested list in my menu and I wanted the first child of the sub list highlighted when the parent is highlighted. I want to code this just by using CSS (in SCSS file format) This is a list within a list. I have list items below another list item of another
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span> <!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list"> <!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
<li class="sub-list-item">
<span>this is another list item in class="sub-list"</span>
</li>
</ul>
*EDIT: changed some of the words being used in this question to make this one understandable. and added another child item to .sub-list to make a better understanding of the issue.
The 'span' (<a>) isn't actually a parent. It's a sibling. The parent to the first child (list item) in the sub list is the <ul class="sub-sub-list">. That means they are siblings.
You can use the + selector to target siblings: https://www.w3schools.com/cssref/css_selectors.asp
.sub-list-item a:hover + ul > li:first-child {
background-color: lightgrey;
}
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span>
<!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list">
<!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
</ul>
Related
I am using the latest version of Bootstrap for the styling of most of my HTML elements.
On one of my pages I need to dynamically add list items to my <ul></ul> element. I am adding these additional list items with jQuery. This is how I do it:
$('ul.test-items').append('<li class="available">Test Item</li><li class="available">Test Item</li>');');
After a new list item is added to the ul element it seems to lose the styling just for that <li></li> item, the already added list items display correctly. The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding. Do I need to redraw the ul element after adding new list items to it so that it can be styled as part of the ul element?
It seems to work well for adding 1 list item element, but 2 or more you can see the difference.
This is my current HTML markup:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
</ul>
After adding the new list items via jQuery it looks like this:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
<li class="available">Test Item</li>
<li class="available">Test Item</li>
</ul>
When I view the markup by pressing F12 in Chrome it looks right, it's just not displaying right. My guess is it is not part of the already styled ul element.
Here is my style:
.test-items .available
{
border: 2px solid #999;
}
The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding
Padding is inside the element – and the newly added elements have that padding inside of their borders as well. That is not the issue.
The spacing between the elements, that comes only from the whitespace between the element’s tags – because the li are displayed inline.
If that’s what you are after here – then you simply have to add that whitespace between the newly added elements yourself:
.append('<li class="available">Test Item</li> <li class="available">Test Item 2</li>');
https://jsfiddle.net/0s7n3907/4/
I am trying to set a nested set of list items in a Joomla menu so that the outermost parents move down to make room for the children. The height of the list items also needs to be a set height because the menu items are buttons. At the moment what happens is that the parent items below a child item horizontally get pushed into the space of the child item so that they overlap. Here is a simplified example of what I am trying to achieve:
<ul>
<li style="height: 40px;">Parent Item 1
<ul>
<li style="height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="height: 40px;">Parent Item 1</li>
</ul>
Here is a link to a page on my site showing exactly this situation:
http://procadsys.worldnz.co.nz/test
Is there any way with CSS to have the heights properly calculated down this list so that each level is 40 pixels below the previous one without any levels overlapping? I've tried changing the position attribute to fixed and relative as well, but this didn't work.
Solved it. The answer is to use line-height, not height:
<ul>
<li style="line-height: 40px;">Parent Item 1
<ul>
<li style="line-height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="line-height: 40px;">Parent Item 1</li>
</ul>
You use this style code
ul > li:hover ul{
height:40px;
margin:0;
padding:0;
}
i have a menu:
<li id="current" class="selected parent item556">
Parent
<ul>
<li class="item557">
Child
</li>
<li class="item558">
Child
</li>
</ul>
</li>
And i want to style only the Parent "a" element, but it styles all the Child elements too, since their are under the parent "li".
I tried something like:
li#current a:first-child{
color: #F2F2F2;
}
Didn't work, how do i style only the Parent "a"?
You can use the immediate child operator > to target the link (i.e. only links directly in the li element):
li#current > a
Try: li#current a:first-of-type to get the first a
Or you can try: li#current:nth-child(1) to get the first child
I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.
Would I run into any issues with something like this?
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
<li class="6"></li>
</ul>
You would do better to write it like this
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
Then you could add the background-image to either the a or the li.
However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.
It is not valid HTML because the only thing allowed in an <ul> element is <li>s.
It's not valid HTML.
<!ELEMENT UL - - (LI)+ -- unordered list -->
I am trying to select the list item with an anchor via css but can't figure out how to do so without selecting ALL anchors within all lists. Here is the list:
<ul>
<li class="fbar"> </li>
<li class="menuItem">
<img src="img/sample_slides/thumb_macbook.png" alt="thumbnail"/>
</li>
<li class="menuItem">
<img src="img/sample_slides/thumb_iphone.png" alt="thumbnail"/>
</li>
<li class="menuItem">
<img src="img/sample_slides/thumb_imac.png" alt="thumbnail"/>
</li>
<li class="menuItem">
<img src="img/sample_slides/thumb_about.png" alt="thumbnail"/>
</li>
</ul>
So I want to select something like
.menuItem li a {
color:red
};
but that is wrong. So what is the right way to arrange it if there is one?
I guess that this is what you want:
li.menuItem a {
border:1px solid red;
};
This will select all anchors (<a>) in any listitem with class "menuitem".
I'm not sure what you exactly want to do. Four of your list items have anchors inside. Which one do you want to select now?
You can select all anchors in all list items with class "menuItem" with li.menuItem a {color:red};. But that's not what you need, huh
You can use Javascript for that. Here's a jQuery Example
$('.menuItem').has('a').css('background-color', 'red');