I have some classes that are grouped. However in IE7 and lower it doesn't implement any of the classes in the group. It just seems to ignore them:
#subnav a,
#subnav span {
/* css here */
}
And the html:
<div id="subnav">
<ul class="depth-1">
<li class="selected">
Some Link
</li>
<li>
Another Link
</li>
<li>
<span>Header</span>
<ul class="depth-2">
<li>
Google
</li>
</ul>
</li>
</ul>
</div>
Is CSS grouping not supported in IE7 and below or is something else causing this to happen?
Thanks
You could try a few things here:
make sure this rule group is last in the css stylesheet to ensure that no other styles are overwriting these ones
make the selectors as specific as possible, to ensure the elements are targeted. So, instead of #subnav a, try div#subnav ul.depth-1 li.selected a
make sure the styles can be applied to those particular elements. a and span are inline elements and do not accept all styles.
Related
I was wondering if there is a way you can apply a hover effect on parent element with just css.
For example, I have a navigation:
<nav>
<ul>
<li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li>
<ul id="audio_sub_menu">
<li class="mes">mēs 1</li>
<li id="klienti">mēs 2</li>
</ul>
<li class="main-nav" id="audio">paklausies!</li>
<li class="main-nav" id="video">paskaties!</li>
<li class="main-nav" id="kontakti">pasūti!</li>
</ul>
</nav>`
And what I want is to, when hovered on
nav ul ul li
element, it affects the
#firstLiElement
.
I know it can be done with JS, but there has to be also a way to do this with css. I found a lot of solutions when you need to affect the sibling or child, but didn't find anything for this situation.
EDIT:
Sorry, didn't even write what I was looking for... Yes, sub_menus are hidden, but when I hover the main navigation li element, they shove up, and they stay visible also when I hover on them. What I am missing is to change the background color of the main navigation li element when the sub menu is hovered.
I found this for you.
a < img { border: none; }
In this example, it would select a tags but only if they contained an img tag. (Aside: this would be a weird departure from the typical syntax where the actual elements being selected are on the right, this would be on the left).
a img:parent { background: none; }
The key difference being that the :parent syntax would only evaluate a single element, the parentNode available in the DOM for every element. This would be similar to forcing the :has selector to only evaluate children rather than all descendants.
https://css-tricks.com/parent-selectors-in-css/
I believe it can't be done. CSS or Cascade Style Sheet - keyword here is Cascade - executes in a cascade direction and not the other way around.
You can do this (assuming the audio_sub_menu, i.e., is hidden):
nav ul a:hover ul {
visibility: visible;
}
And you'll be targeting a child on its parent hover. So, you can either change your layout and design to use this knowledge, or go with the JS solution :)
edit
to get the same color, style the :hover on the parent as well and change the first </a> in your HTML code
<nav>
<ul>
<a href="#"><li id="firstLiElement" class="main-nav ieraksti">ieraksti!</li>
<ul id="audio_sub_menu">
<li class="mes">mēs 1</li>
<li id="klienti">mēs 2</li>
</ul>
</a>
<li class="main-nav" id="audio">paklausies!</li>
<li class="main-nav" id="video">paskaties!</li>
<li class="main-nav" id="kontakti">pasūti!</li>
</ul>
</nav>
And the CSS
nav ul a:hover {
background-color: your_color;
}
nav ul a:hover ul {
visibility: visible;
background-color: your_color;
}
edit - On the hetasbo's answer
those are suggested css selectors, they don't exist
I've been assigned to design a nav menu using CSS.
I've designed it accordingly, but I didn't find help regarding how to revert the menu back to its unordered list view when the browser window becomes too small to fit the menu.
I can't use scripting, only pure CSS.
Any suggestions?
The HTML code is as following:
<nav class="line">
<ul>
<li>Home</li>
<li>Articles
<ul>
<li>Things</li>
<li>Stuff</li>
<li>Subjects
<ul>
<li>Serious subjects</li>
<li>Frivolous subjects</li>
</ul>
</li>
</ul>
</li>
<li>Solving homework
<ul>
<li>Not here</li>
<li>Not here either</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
What you are trying to do is a responsive page. That is also called the 'mobile first grid system' because you make it fit the small screen first, then you only add new elements to the classes in media queries as you move to bigger screens.
This should get you started:
http://css-tricks.com/resolution-specific-stylesheets/
http://css-tricks.com/css-media-queries/
And just google around the subject of 'media queries' and 'responsive web page' and you should find all the info you need.
Good luck!
Try to use media queries.
For example:#media (max-width:400px)
{
ul li ul
{
display:none;
}
}
You can use media queries for this.
I have a nested UL structure that represents a folder tree which can grow very deep. I'm stuck at doing a simple :hover effect for the LI elements. The problem is that doing a li:hover won't work as it affects all the parent "li's" aswell. Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style aswell, but due to circumstances that's not an option now. I have a working solution by using javascript to place a class on the hovered LI and then style this class instead, but i'm really interested in seeing if there's actually a way of accomplishing this through pure css.
I imagine there may be a way of doing a very "hardcoded" css solution but i am more interested in a dynamic and clean one, since the structure can nest indefinitely.
Maybe there's some pseudo selector i'm not aware of? Note that it doesn't have to be IE<8 compatible
<ul>
<li>
This LI should not recieve the hover effect
<ul>
<li>
A li:hover will place the effect on this LI,
but also the parent LI, since that element is
also techincally being hovered.
</li>
</ul>
</li>
</ul>
If you want to use pure CSS then you will need to us parent, child, elements.
For the hover elements:
ul li:hover{
"Style"
}
For the other elements:
ul li ul li{
"Style"
}
UPDATE: I just reread your question, in which you state:
"Usually I would have tried to apply the hover effect to a link
element or something in the LI, to avoid parents taking the style as
well, but due to circumstances that's not an option now."
If that is true, then the solution below is not viable for your circumstance, and you cannot achieve what you desire with pure CSS. I've left my answer, however, as others who want to achieve this but can use a nested element may find it useful.
Pure CSS Only by Adding HTML
The only way you can possibly achieve something of what you seek by pure CSS is to add an extra element (like a span) within the li and perform the hover on that. I assume that whatever folder is being hovered, that folder alone is what you want to highlight. If so, this fiddle illustrates what I am saying, using this code:
HTML
<ul>
<li>
<span>Folder 1</span>
<ul>
<li>
<span>Folder 1.1</span>
<ul>
<li>
<span>Folder 1.1.1</span>
<ul>
<li>
<span>Folder 1.1.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
li span:hover {
color: red;
background-color: yellow;
}
Now, if you want child folders to also highlight on hover of a parent folder, then perhaps this fiddle illustrates what you want with this code change:
CSS
li span:hover,
li span:hover + ul span {
color: red;
background-color: yellow;
}
They key point is to utilize the extra element to control the hover, whether of the item itself or any later generation elements that the hover should affect.
Not clear at all... but if you want to style nested LI when you are hovered the parent LI without styling the parent one...
Try this:
CSS
ul li ul li {
color: blue
}
ul li:hover ul li {
color: red
}
fiddle example: http://jsfiddle.net/EHp3n/
Your question is not very clear and also it will confuse. Let me explain, when the user hover the city (India / China / UK), style should be applied to State and Country through CSS.
<ul>
<li>India (Apply Style)
<ul>
<li>India State (Apply Style)
<ul>
<li>India City (On Hover)</li>
</ul>
</li>
</ul>
</li>
<li>China
<ul>
<li>China State
<ul>
<li>China City</li>
</ul>
</li>
</ul>
</li>
<li>United Kingdom
<ul>
<li>UK State
<ul>
<li>UK City</li>
</ul>
</li>
</ul>
</li>
</ul>
I am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;
Story short I have widgets sidebar. I style it like this:
.widgets ul {padding: 10px}
Now one of the ULs inside widgets I want to avoid padding from it, but keeping all other ULs use default padding of 10px.
So i tried to give class to children UL which I want no padding on like this
.tabs {padding:0}
I tried ul.tabs, and .widgets ul.tabs nothing seems to take effect. It still receives padding 10px. And I can't afford to do custom padding for every UL inside the widgets.
Can you please tell me what I am missing ?
The html is pretty basic.
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
Thats the html basic framework. I set padding:10px to any ul in PARENT widgets ul but I want specific custom widget to have its own custom styles, I can't do it :( in this case ul class=tabs
The "C" in CSS stands for "cascading". Learn about the cascade and you will see that your second rule is less specific than the first, so the first wins.
In general, the rule with more class selectors wins, and #ids trump most stuff.
To answer your question, adding specificity will do it.
.widgets ul.tabs {padding:0}
(assuming the .tabs is indeed on the ul like you said.)
A more specific CSS selector should override a less specific one. So your experiment with using .widgets ul.tabs should work. Is it possible that when you tested that, your browser had cached an earlier version, or some such?
Here's my sample HTML page. First I tried it the way you had it; it didn't work (as it shouldn't). Then I changed it to what is here, and it worked (in Firefox).
<html>
<style>
.widgets ul {padding: 10px}
.widgets ul.tabs {padding:0}
</style>
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
</html>
example of what dman is talking about, with your code:
http://jsfiddle.net/SebastianPataneMasuelli/8WRam/
( i think you might have missed the 's' in .widgets )