I've got a few list items, the first one's with a featured class and the after a while a few without. Withh CSS, I'd like to select the first item in the list that does not have a featured class...
The code is as follows:
<ul>
<li class="featured"></li>
<li class="featured"></li>
<li></li>
<li></li>
<li></li>
</ul>
I've tried the following with no effect:
ul li:not(.featured):first-child {
/* Do some stuff here */
}
Any ideas on how to do this without resorting to jQuery?
UPDATE
The ability does exist to add non-feature classes if that would help. E.g:
<ul>
<li class="listing featured"></li>
<li class="listing featured"></li>
<li class="listing"></li>
<li class="listing"></li>
<li class="listing"></li>
</ul>
Use the "Adjacent sibling combinator": http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators
li.featured + li:not([class="featured"])
In addition to the great answer by #Cédric Belin - if you wanted to make the CSS backwards compatable you could use the following CSS selectors:
ul .featured + li {
/* some styles */
}
ul li.featured {
/* some styles */
}
Note that the order of the CSS styles is important here as both selectors have the same weighting - so which ever style comes last will be the one that overrides the previous style (due to the cascading nature of CSS)
Working example: http://jsfiddle.net/Ku77T/
Related
In the code, there are two links and I want to implement different hover effects for both the links (i.e if I hover over I want to buy the link should become red and if I hover over the link I want to sell It should become blue). Please guide me on how I could achieve it
Here is the part of the code:
<ul>
<li><Link to='/buyer'>I want to buy</Link></li>
<li><Link to='/seller'>I want to sell</Link></li>
</ul>
In case if I used an anchor tag I could have used a: hover but was unable to find what to do in the above case.
Define class name to the <li> tag, then by using CSS Descendant Selector (a whitespace), you can reach the <a> tag:
.classNameOfLiTag a:hover {
// styling
}
Descendant selector can select any descendant elements wrapped under <li> regardless how deep. To be more precise, you can use child selector (>) that selects only <a> tag that is directly the children of <li> like so:
.classNameOfLiTag > a:hover {
// styling
}
In your js file:
<ul>
<li><Link to='/buyer' className={class1}>I want to buy</Link></li>
<li><Link to='/seller' className={class2}>I want to sell</Link></li>
</ul>
In your css:
.class1:hover {
color: red;
}
.class2:hover {
color: blue;
}
You can add different class to li and then give it hover styles
<ul>
<li className="link1"><Link to='/buyer'>I want to buy</Link></li>
<li className="link2"><Link to='/seller'>I want to sell</Link></li>
</ul>
CSS
.link1:hover{
// your style
}
.link1:hover{
// your style
}
HOw to style link with class selected under this html structure
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
<a class="selected" href="/page">Page</a>
</li>
</ul>
</li>
This should do it for you:
.submenu_items ul li a.selected{
/* your CSS properties here */
}
You can also use the > operator to denote a direct descendant.
There are a number of variations in how you can target the .selected link, I'd also reccommend you have a look at the MDN article on CSS specificity
Use the below to style selected
.submenu_items ul li > a.selected{/* your code goes here. */}
Hope this helps.
To over-ride parent styles (in this case 'submenu_items') you just need to make your CSS targeting more specific. For example:
.submenu_items ul li a.selected{
/* Add your CSS */
}
The navigation menu of a fictitious company is as follows:
The company specialises in the made-up, "Crab Sitting", but offers two other services that are targeted at people's anthropod pets.
It has been decided that the link to "Services" in the navigation should lead to "Pet Crab Sitting" right away — without a general page about their services.
That is easy to do with HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<ul>
<li>Crab Sitting</li>
<li>Polishing Crustacean Shells</li>
<li>Massages for Anthropods</li>
</ul>
</li>
<li>Contact</li>
</ul>
But from a UX standpoint, a rollover effect that will change both is necessary to clarify that the two lead to one place.
In other words, making it appear that the two list elements are one link.
How can a :hover effect be achieved on "Services" and "Crab Sitting" at the same time with CSS, but without sacrificing HTML semantics?
else, you may as well filter from href :
This way, it doesn't matter much where similar href link stands, as long as it's being a child within adjacent ul .
http://jsfiddle.net/GCyrillus/b5Lzn/
[href*="crab-sitting"]:hover, [href*="crab-sitting"]:hover + ul [href*="crab-sitting"] {
background:green;
}
and if in second link, you forget last slash on href, it still works;
http://jsfiddle.net/GCyrillus/b5Lzn/1/
<li>Services
<ul>
<li>Crab Sitting</li>
the best you can do is:
http://jsfiddle.net/ZVUu2/2/
a.blah:hover
{color: red;}
a.blah:hover + ul > li > a.blah
{color:red;}
<ul>
<li>Home</li>
<li><a class="blah" href="/services/crab-sitting/">Services</a>
<ul>
<li><a class="blah" href="/services/crab-sitting/">Crab Sitting</a></li>
<li>Massages for Anthropods</li>
</ul>
</li>
</ul>
li:hover{
This is for the event on the main li
}
li:hover ul li:first-child{
here you have selected the first element of the nested ul when the main li is hovered
}
Happy coding
The following HTML is created by Joomla 1.7 for the menu of a site I'm working on:
<ul class="menu-tabbed-horiz">
<li class="item-435 current active parent">
<a class="firstmenuitem" href="/joomla/" >Home</a>
</li>
<li class="item-467">
<a href="/joomla/index.php/menu2" >Menu 2</a>
</li>
<li class="item-468">
<a href="/joomla/index.php/memu3" >Menu 3</a>
</li>
</ul>
Via CSS, I'm styling this menu. For example, I style the menu item that the mouse is hovering over like this: .menu-tabbed-horiz a:hover. The active one can be styled like so: .menu-tabbed-horiz .current a.
This works without problem, but now I would like to style a menu item differently when it is the current one and hovered on than when it is just hovered on. Something like .menu-tabbed-horiz a:hover && !.current, but that obviously does not work.
Any suggestions would be appreciated, Fabian
If I've understood your question correctly, then you're looking for something like this:
.menu-tabbed-horiz .current a:hover { /*Hovered and current*/ }
.menu-tabbed-horiz a:hover { /*Hovered (all)*/ }
This should work because the first selector is more specific than the second and will therefore be applied to elements with .current instead of the second selector.
Here's a working example of the above code.
You can't do this kind of thing directly. The solution is to define the "non-current" style for .menu-tabbed-horiz li, and the "current" style for .menu-tabbed-horiz li.active.
The second style is more specific than the first, so it will take precedence whenever both styles are present. The first style will be applied for all .menu-tabbed-horiz elements that don't have the .current class.
For example my HTML is this
<ul>
<li>Sample 1</li>
<li>Sample 2
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3
<ul>
<li>Grandsub 1</li>
<li>Grandsub 2</li>
<li>Grandsub 3
<ul>
<li>verySub 1</li>
<li>verySub 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Sample 3</li>
</ul>
I want to use different styles on every child <UL> without defining any class or id on them.
I dont know how many child <ul> might occur inside one another so inline css will not to the job
Is this possible?
All you need is to specify each level like so:
<style type="text/css">
ul li { color: red; }
ul li ul li { color: blue; }
ul li ul li ul li { color: black; }
ul li ul li ul li ul li { color: green; }
</style>
No inline style attributes, no classes required.
Works perfectly on the HTML snippet you provided. Keep in mind, that each successive level will inherit from the one before it. That's the whole idea of the "cascading" part of CSS, but I've burned myself forgetting margins at a lower level and having things go haywire.
You can use the "Inline Styling" for each element to have different styles.
Here it is:
<ul style="property:value;">
<li>..</li>
</ul>
If you don't know how many child UL/LI's there may be inside each other, then this won't be possible in CSS.
CSS doesn't support "fuzzy logic" such as: if there are over 5 <li>'s then do something.
Javascript Is the way forward me-thinks!
It looks like you want some way of programmatically defining your style. This is not possible using CSS alone. It does not support you defining your own symbolic names, let alone attempts to do something more 'programmery'. If you were able to generate your CSS dynamically then you could use this to work out the number of levels and algorithmically define the style each time
Otherwise the alternative is to put a maximum on the level of nesting (say 20 levels) and define a style for each one like artlung suggests. Most of the time the lower level definintions won't get used, but they will be there if you need them. This isn't perfect but it's the best you can do with writing directly in CSS.
This uses jQuery, and cycles through a list of three background colours:
function nestedcolour(elements, level) {
if (elements.length > 0) {
var colour = ["#fafafa", "#fbf9ea", "#eeeeee"][level % 3];
elements.css('background-color', colour);
nestedcolour(elements.children("ul").children("li"), level + 1);
}
}
$(document).ready(function() {
nestedcolour($(".classofparentelement"), 0);
});
The .classofparentelement is not really necessary, you can use any method to find the parent element(s).