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>
Related
I am trying to alter MediaWiki's hideous default color for visited links and keep the red color for new links. New links have class new or their parents have this class set. So I tried
:not(.new) a:not(.new) { color: #0074D9 !important; }
But as I inspected in the browser console, this rule overwrites li.new a - which it should not. Experimenting a bit,
li:not(.new) a:not(.new) keeps the red color for li.new a,
*:not(.new) a:not(.new) overwrites the red color
Can you explain this behavior and recommend a CSS rule forcing blue color for all links but the new ones?
:not(.new) will match every element that does not have a new class. So for example :not(.new) a in <li class="new"><span><a>...</a></span></li> will match span a. In general, :not() is rather hazardous to use without an accompanying specific class or id that you know won't be used elsewhere.
What you want is "a tags which do not have a .new ancestor" (as opposed to "a tags which have a non-.new ancestor"), which cannot be expressed as a CSS selector. Given you know that the .new element is the grandparent, you might be able to write something like :not(.new) > * > a instead.
set a color for li.new a and li a.new and then set a color for li:not(.new) a and li a:not(.new) .
If you want just the visited links to change color add :visited to the css selectors
ul li.new a, ul li a.new {
color:red
}
li:not(.new) a {
color:green
}
a:not(.new) {
color:green
}
<ul>
<li>
<a href="#" >Normal Link</a>
</li>
<li class='new'>
this will NOT be green because LI has class new
</li>
<li>
<a href="#" class='new'>this will NOT be green because it has class new</a>
</li>
<li>
<a href="#" >Normal Link</a>
</li>
</ul>
Consider these lines of codes:
<dd class="flt-block-content ">
<ol>
<li style="width: 50%;">
abc
<span class="count-wrapper">(6)</span>
</li>
<li style="width: 50%;">
def
<span class="count-wrapper">(16)</span>
</li>
</ol>
</dd>
How Can I override the width property of all the li tags that resides in the class named flt-block-content with my custom value?
Second Q: Is the use of !important necessary for overriding?
If you have an inline style and want to override it, you'll need to use !important to do so.
.fit-block-content li {
width: 100% !important;
}
First of all, you are using inlinestyles which have specificity greater than id, class or element. So they would override styles from all 3 of these. So in order to have a default width and then override, you can create a class default and assign width:50% and a class override and assign the override styles
li.default {
width:50%
}
li.override {
//Override styles
}
For your second question on ! important, it's never a good practice to use ! important unless required in very specific scenarios
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 been trying to figure this one out, but can't seem to get it right, perhaps I'm way off with my thoughts, but this is it.
I have no control over the UL class names, they are what they are. I can only change the class name of the , the code is as below:-
<div class="custom-parent-div-name-changeable">
<div class="custom-child-div-name-changeable">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</div>
</div>
The problem I have is the "name-cant-be-changed" class for the UL has a background and border set. I need to remove the background and border in another stylesheet, using the !important selector due to limitations in the software used to power the website.
The major setback is this same class ("name-cant-be-changed") is used twice on the page. so I need to create CSS for the "name-cant-be-changed" which is inside "cant-change-this" div class. Both instances of "name-cant-be-changed" are within a div with class "cant-change-this", but have different parent class names, eg. "any-old-name", like so:-
<div class="parent-div">
<div class="any-old-name">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
</div>
</div>
</div>
How can I create separate CSS for the UL class "name-cant-be-changed" which is rendered based on the parent in which both reside?
I tried using the following, with various combinations of the class names to no avail:-
.custom-child-div-name-changeable > .name-cant-be-changed {
background: none !important;
border: none !important;
}
Can anybody shed some light on this? Thanks in advance!
The > operator means "direct child of preceding selector". I think you want something like this:
.custom-child-div-name-changeable .name-cant-be-changed {
background: none !important;
border: none !important;
}
or
.custom-child-div-name-changeable > div .name-cant-be-changed {
background: none !important;
border: none !important;
}
or
.custom-child-div-name-changeable > div.cant-change-this .name-cant-be-changed {
background: none !important;
border: none !important;
}
Either:
.any-old-name .name-cant-be-changed {…}
or
.any-old-name > .cant-change-this > .name-cant-be-changed {…}
The first reads: all elements with '.name-cant-be-changed' who have a parent somewhere with class .any-old-name.
The second reads: all elements with .name-cant-be-changed with an immediate parent of .cant-change-this that has an immediate parent of .any-old-name
If a ul has li items with multiple classes, is it possible to get the last item of a specific class using :last-child?
For example, consider following:
<ul class="test">
<li class="one">
<li class="one">
<li class="one">
<li class="two">
<li class="two">
</ul>
I want to add some style to the last li having class "one" (ie. third in the list).
I tried following and it does not work.
ul.test li.one:last-child
That's not possible yet.
:last-child selects the last child, regardless of the tag name, etc.
The possible alternative, :last-of-type selects the last occurrence of a tag. It ignores the class name, etc.
Your only option is to add a specific class name to that element, or use JavaScript to add this class name.
Instead of giving class for each li, you can go for nth child where you can assign the style by li number.
If you want to give the separate css for your 3rd li then you need to write
li:nth-child(3) {
color: green;
}
You can do it using jquery: http://jsfiddle.net/surendraVsingh/HyAhL/2/
Jquery code:
var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');