I need to select the last element A, from an ul li list
CSS like .items:last-child, get the li, but i need only the A related to LINK 3
<ul id="menu">
<li id="items">Link 1
<li id="items">Link 2
<li id="items">Link 3
</ul>
you can use > a a to get immediate child of type a directly:
.items:last-child > a {
/* your css here... */
}
by the way, just noticed that you are using id attribute for items, in that case you need to switch to:
#items:last-child > a {
/* your css here... */
}
Related
Im trying to get my hover selecting work properly.
Im having two classes in a li element.
It may have the class named disabled , or it may have a class called wait , or it may have both disabled and wait
I want this hover to only work on the li element with the class named wait, but only if disabled class is not on it.
How can i achieve this?
Current attempt:
.group li:.wait:not(.disabled):hover {
// do something
}
You had a : after your li, which signified that the following element in your query would be a pseudo-class. However, you just wanted a simple class selector: .wait.
.group li.wait:not(.disabled):hover {
color: red;
}
<ul class="group">
<li>None</li>
<li class="wait">Wait</li>
<li class="disabled">Disabled</li>
<li class="wait disabled">Wait and Disabled</li>
</ul>
I have following HTML structure. I want to select first ul with class name 'second class' and apply width which will be different from second ul with same class name.
<div>
<div class='Link1'>
<a>Products</a>
<div class = 'firstClass'>
<ul class='secondClass'>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class='Link1'>
<a>Tools</a>
<div class = 'firstClass'>
<ul class='secondClass'>
<li></li>
<li></li>
</ul>
</div>
</div>
<div>
I had tried below css but didnt work.
.Link1 > .firstClass > ul.secondClass:first-child{
width:750px;
}
Using only CSS, there is no way to stop a rule from applying after it applied on one element. This basically means
.Link1 > .firstClass > ul.secondClass:first-child
will apply to all elements that match that selector.
However, you can easily apply a different class to only the first match using JavaScript:
var firstMatch = document.querySelector('.Link1 > .firstClass > ul.secondClass:first-child');
firstMatch.className = firstMatch.className + ' additionalClass';
... and, of course, you'd need to style the additionalClass in your CSS:
.Link1 > .firstClass > ul.secondClass.additionalClass:first-child {
/* CSS here */
}
Using jQuery, it would be:
$('.Link1 > .firstClass > ul.secondClass:first-child').first().addClass('additionalClass');
Here's a working example, as opposed to the original, not working.
I have standrat floating grid, somethig like:
ul li{
width:300px;
float:left;
}
I need to 4th element go under 3thd one. Like on the picture.
thanks for your advise!
Bit of a duct tape solution but could it be fixed by putting Column 3 & 4 in the same container?
eg:
<ul>
<li>
(Column 1)
</li>
<li>
(Column 2)
</li>
<li>
<div style="float:left;">
(Column 3), (Column 4)
</div>
</li>
<li>
(Column 5)
</li>
</ul>
So here is one solution depended on ForeverStuck idea.
Little jQuery:
//Select element3 and 4 wrap them as li
$('ul > li:nth-child(3), ul > li:nth-child(4)').wrapAll( "<li />");
//Then unwrap inside li elements, so 3 and 4 become 3 element
$('.homepage .box-category > li > li > a').unwrap();
Myself in the beginning stages of javascript want to achieve the following.Say I had some li tags which are further included with some li tags like this.
<ul>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
</ul>
Now class 2 block is hidden originally in the page.My work is when someone hovers on a link of class 1 its respective block ( i.e., class 2) should display.But the code i had written is displaying all blocks having class 2
May be i can write a mouseover() function for each link of class 1,but is it correct?I had seen this type effect in some sites like linked in,awwwards.com
Example link is
Best Colorful Websites | Web Design Inspiration
In this link when mouse is hovered on a image,then for only on that image a symbol is display on corner bottomI want this type effect.
Can any please help me??Thanks in advance??
Well this can be achived with css only:
ul ul{
display:none;
}
ul > li:hover ul{
display:block;
}
try a fast css solution (not tested because you did not put a jsFiffle code axample)
ul li:hover ul li.2
{
display:block;
}
also, do not use only numbers in class names... will not work on some browsers
try class="c2" at least
I have an ul with 7 li inside of it. I know that I can style the first and last li but is it possible to style the last 3 li's so the text is a different colour? This is the first time I have come across this problem/dilemma. I have googled around a bit and have not found much that is really helping me.
<div class="international-portfolio">
<div class="international-portfolio-title"> Sales Representation International</div>
<ul class="nobullet inline int-portfolio ">
<li class="excelsior-hotel-ernst first">
<li class="le-mas-candille">
<li class="mandarin-oriental-hotel-group-worldwide">
<li class="victoria-jungfrau-grand-hotel-spa">
<li class="palace-luzern">
<li class="eden-au-lac">
<li class="bellevue-palace last">
</ul>
</div>
ive updated the coding - trying the solutions given but not working at the moment but will keep at it.
This should do the trick (but mind you, it won't work in older versions of IE):
http://reference.sitepoint.com/css/pseudoclass-nthlastchild
Use the css selector as follows:
li:nth-last-child(-n+3) {
/*stuff here*/
}
Here's an example, too:
http://jsfiddle.net/yAUwb/
You can use:
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
color: red;
}
It is kinda of possible with this code
.myList li:nth-last-child(1),
.myList li:nth-last-child(2),
.myList li:nth-last-child(3)
{
color: red;
}
Demo: http://jsfiddle.net/2np58/