I was wondering how can I keep my main parent category highlighted as when hovered on when viewing the main parents sub categories using CSS?
A quick example or tutorial will help thanks.
Your CSS would look something kind of like this:
.highlighted, a:hover {
/* styles for when the category is hovered or highlighted */
}
Then when viewing the subcategories you need to add the "highlighted" CSS class to the element that represents the parent category. How exactly you do this depends on how your website works, but it could be done with javascript or with server-side code.
EDIT 1: Yes, this can be done with just CSS, but it probably requires a lot of manual labor. If your website is just a bunch of static HTML files you could go in and edit each of them to highlight the parent class. For example, on the page entitled "Sedans" (a subcategory of cars) you could change
<div class="category">Cars</div>
to
<div class="category highlighted">Cars</div>
There should be nothing surprising or special about that to you.
You can use the code from CSS play 1 or CSS play 2 for this.
Each of examples meets your needs.
Main idea is to use pseudo-class for the base class:
#menu li a:hover {border:0; text-decoration:underline;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#c00;}
http://jsfiddle.net/axCPq/
CSS:
.main-parent:hover a.parent { color: green; }
.child-ul a:hover { color: green; }
HTML:
<ul class="main-parent">
<li><a class="parent" href="#">Link Parent</a>
<ul class="child-ul">
<li>Link Child</li>
<li>Link Child</li>
<li>Link Child</li>
<li>Link Child</li>
<li>Link Child</li>
<li>Link Child</li>
</ul>
</li>
</ul>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I was testing list-style-type changes for child lists and noticed something strange happening. When you try and change the properties of a child list by using a selector like li li it will not work. If you remove the topmost selector in my below example, all styles are removed. If you inspect the element, the styles aren't being applied at all so it's not as though something is overwriting them.
li {
color: purple;
}
li li {
color: red;
list-style-type: circle;
}
li li li {
color: blue;
list-style-type: lower-roman;
}
li li li li {
color: green;
list-style-type: square;
}
<ul>
<li>Parent List</li>
<ul>
<li>1st Child</li>
<ul>
<li>2nd Child</li>
<ul>
<li>3rd Child</li>
</ul>
</ul>
</ul>
</ul>
When you replace li with ul, it works as you'd expect the above to. Why does all of this happen? I've never seen behaviour like this before.
ul {
color: purple;
}
ul ul {
color: red;
list-style-type: circle;
}
ul ul ul {
color: blue;
list-style-type: lower-roman;
}
ul ul ul ul {
color: green;
list-style-type: square;
}
<ul>
<li>Parent List</li>
<ul>
<li>1st Child</li>
<ul>
<li>2nd Child</li>
<ul>
<li>3rd Child</li>
</ul>
</ul>
</ul>
</ul>
I am voting to close this as I'm an idiot and that's the extent of this. I'd hope you vote to close as well.
That's because using li li means a child li of an li. So in this case, that would apply to the second li below:
<li>
<li>foo</li>
<li>
However, in your example, the nested lists are not inside an li, but instead by themselves, so they are not the children of any li.
In your HTML, LIs are not getting nested in the LIs (they are not within each other - <li><li>...</li></li>. Hence, the styling of. li li {...} won't work at all.
The way your HTML is, it is nesting ULs. Hence, ul ul {...} styling will work.
Remember, in CSS to make li li work they should be nested within each other otherwise CSS won't work.
I would recommend just creating classes like .green .red .blue .purple and adding those classes to the <li> tags, because it has better re-usability.
I would recommend you to go trough the essentials of HTML5 again & work on your style of coding.
P.S Regarding your problem, here's another Stack that explains how to properly nest lists.
I have a multi level navigation menu on my page consisting of an unordered list. That list has the class menu, like so:
<ul class="menu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
</ul>
</li>
</ul>
The href attributes are set to # for illustration purposes.
My question is: What is the best Selector to use for that kind of menu regarding speed?
At the moment I am using something along these lines (again, just for illustration, there are rules missing):
.menu {
background-color: #CCC;
}
.menu li {
background-color: #FFF;
}
.menu li > ul li ul {
background-color: #333;
}
Is a class the fastest selector in that case? Or should I use something like .navigation-container ul? Do you have any recommendations?
Simpler selectors are faster than complex selectors. For example .menu is faster than .menu ul, but it's no dramatic difference.
What you have is fine. You could perhaps try to make the .menu li > ul li ul less complex, but don't expect to notice any difference, because you could perhaps shave off a millisecond or two on the rendering time.
Here is some reading about efficient CSS seletors: http://csswizardry.com/2011/09/writing-efficient-css-selectors/
It's quicker to reference with an id, e.g. #menu, #menu li. I would also add an id to the sub ul tags too :)
**Thank you for your answers. I am waiting on a Cache plugin to be removed before I can test and confirm everythign is working correctly.
I have a unordered list that contains some sublist. All I want to update are the Children of the main <ul> "Names" and "Jobs"
<ul>
<li>Names
<ul>
<li>Mike</li>
<li>Bob</li>
<li>Steve</li>
</ul>
</li>
<li>Jobs
<ul>
<li>Police</li>
<li>Fire Fighter</li>
<li>banker</li>
</ul>
</li>
</ul>
I want the ability to only style the child <li>'s of my main <ul> not any of the sub items. The trick is I can not add any classes or id's to the list or sublist. I can put the whole thing in a containing div.
*NOTE if i add a class or ID to my it will add it to all of them. This is a premade template i have no control over.
I was thinking I could do this:
<div id="mylist_container">
<ul>
<li>Names
<ul>
<li>Mike</li>
<li>Bob</li>
<li>Steve</li>
</ul>
</li>
<li>Jobs
<ul>
<li>Police</li>
<li>Fire Fighter</li>
<li>banker</li>
</ul>
</li>
</ul>
</div>
And style it like this:
#mylist_container ul>l1{
font:bold 18px arial;
}
I think you answered your own question! Or at least 99% of the way. Create one more child selector by adding > between #mylist_container and ul. This will only target a ul that is a child of #mylist_container and not go any deeper in the structure.
#mylist_container > ul > li { /* your styles */ }
Try
#mylist_container > ul > li {
font: bold 18px arial;
}
#mylist_container > ul > li ul{
font: normal 10px arial; //assign the default view here
}
Demo: Fiddle
take a look at my code example.
The first targets all <li> and the second targets only <li> inside of another <li>.
ul>li{
any styles in here form the top level li
}
ul>li>ul>li{
styles to cancel out the first styles
}
try this..
div ul li ul li{
color:#000000;
}
div ul li{
color:red;
}
http://jsfiddle.net/Mk3g4/
Is it possible to use a pseudo class inside of a :not tag?
Example:
li:not(.inner:hover):hover { // Code }
<li>
<div class="inner"></div>
</li>
I am trying to cancel out the effect of the parent hover, when I hover an inner item, without using javascript.
The expected result for above code is when you hover the li, but not the inner div, the li get's a hover effect. But only if you're not hovering the .inner.
Update
http://jsfiddle.net/eTV86/
What I want is, when the .inner turns black, the li turns back to red.
Yes, but you're using both a class and a pseudo-class, which is invalid:
li:not(.inner:hover):hover
Even if you change it to something that's valid (as per this answer):
li:not(.inner):hover, li:not(:hover):hover
The first selector will always match your li on hover, and the second selector won't ever match anything. It will never match your div.inner because you're attaching the :not() to the li.
Lastly, if you want to change the li when .inner gets a hover, that's not possible with current CSS selectors. You'll need JavaScript.
You can use the simple css instead pseudo class
HTML
<ul>
<li class="active">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
CSS
ul li a{ color:black}
ul li a:hover { color:red }
ul li.active a:hover { color:black /*re use the same properties which is there in default style viz ul li a{} */}
DEMO http://jsfiddle.net/mKQas/2/
Sorry with title if it is not looks bad, I don't know how can I write the title for my issue.
So I have a menu bar with some menu-items and submenu-items as:
<div id="mainmenu">
<ul id="menu">
<li><a class="current" href="">Menu1</a></li>
<li>Menu2
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
Here is the fiddle of what I have done so far.
What I want is to keep the menu-item also in :hover state if its submenu-item is being hover, such as If my mouse is on submenu or submenu2 the Menu2 should also be darkened. How can I do this with CSS?
I hope I am clear with my question.
EDIT:
Wooo thanks a lot every-one.
got it with: #menu li:hover
#menu li:hover,#menu a:hover,#menu > li a.current{
}
In last line of your CSS, add #menu li:hover to target selectors
Updated example here: http://jsfiddle.net/7UaNn/
Add this #menu li:hover > a in the following css
#menu a:hover, #menu > li a.current {
// your Style
}
So it should look like this:
#menu a:hover, #menu > li a.current, #menu li:hover > a {
// your Style
}
See Demo: http://jsfiddle.net/akhurshid/bk2HA/7/
At the moment all you hoverstyles for the listitem are applied to the a- Element.
However, you need to apply them to the li-Element to keep the hover state active.
Sometimes that may become tricky, but in your case it's pretty easy, just add:
#menu > li:hover{
background:#474747;
}
to your styles.
See your modified fiddle
Along with "a" also add hover for "li" :
#menu > li:hover{
background:#474747;
}
You may achieve this by hooking up to the :hover state of the parent li element instead of the anchor element - which is a children of the list-item that is actually hovered - like so:
li a:hover,
li:hover > a {
color: #fff;
}
You might need to use :nth-child() to get around every sublink being in hover state. Did not test this.
/edit: updated the selector, now using > a to only select the direct child anchor element of the hovered list element, no need for :nth-child or the like.
Make the thing that is changed on hover the background of the LI rather than the background of the 'a'.
ul#menu li:hover { background:#000; }