<div class="jqueryslidemenu">
<ul>
<li class="menuitem">TEST1</li>
<li class="navOFFTDDisabled" id="TEST2">TEST2</li>
<li class="navOFFTDDisabled" id="TEST3">TEST3</li>
<li class="navOFFTDDisabled" id="TEST4">TEST4</li>
</ul>
</div>
CSS FILE
.jqueryslidemenu ul li {
display: block;
background: #FFCC00;
color: white;
padding: 4px 12px 6px 5px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
font-weight: bold;
cursor: hand;
}
.navOFFTDDisabled{
//Aplly Style
}
I cannot Apply class="navOFFTDDisabled" to each (li) Items because the "jqueryslidemenu" is overwriting the navOFFTDDisabled style .How can i apply both styles
Make it a better match,
.jqueryslidemenu ul li.navOFFTDDisabled{
//I'm more important neener neener.
}
Just to be more useful, you can actually calculate which selector with take precedence as described in the specification
You have three possibilities to override a selector:
order of the selector: a selector further down in your stylesheet overrides a selector that is further to the top
selector specifity: http://www.w3.org/TR/CSS2/cascade.html and http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/
basically it depends on how many tags, classes and ids you have in your selector. classes add more weight than tags and ids add more weight than classes
the last thing you can do is to add an !importantto your style rule, which overrides any other selector. To be correct you can still have more !importantrules, than the selector specifity rule comes into play again. E.g. .klass{color:red !important}
Related
Is it possible to group selectors (e.g. p, li) with :not() negation pseudo-class? (Something like this, just to give an idea):
p, li a:not(.tags, .promo):link{
border-bottom: 1px solid;
padding: 0 0 0.06rem 0
}
p, li a:not(.tags, .promo):visited,
p, li a:not(.tags, .promo):hover,
p,li a:not(.tags, .promo):active {
border-bottom: 1px solid #ccc
}
Please note: not multiple arguments, but group the p and li.
It's not possible to combine multiple HTML tags with a pseudo-class like not() with pure CSS.
Note: I say pure, since using a CSS pre-processor like Sass, this would be possible
The only way of achieving the same, with fewer lines of CSS is to apply a class to the elements you wish to include
So instead of
p a:not(.something),
li a:not(.something) {
color: red;
}
Use a class:
.target:not(.something) {
color: red;
}
<p class='target'>
<a>Link</a>
</p>
<ol class='target'>
<li>
<a>Link</a>
</li>
</ol>
Here's the offending css:
ul.pricing-table span {
display:block;
font-size:40px;
font-weight:bold;
color:#222;
padding:30px 0;
line-height:1.3;
}
I attemped to fix it with:
<style>
.spans {
display:inline;
font-size:14px;
font-weight:normal;
padding: 0 0;
line-height:1;
}
</style>
Where the span looks like:
<p>This is more of a test <span class="spans" style="color: #e03e2d;">do red</span> and <span class="spans" style="color: #34495e;">do black</span></p>
No matter where I put the style block, before the link or after it still uses the style from the file. I thought that what I put in style blocks in the html overrode linked files. Obviously not.
I also tried various schemes of "initial" "revert" "set" none of which had any effect and most gave me errors.
First of all you don't provide the full HTML code, the issue isn't reproducible, so we need to make some assumptions. It's not about where you put your style block, what matters is selector specifity. When you select element with ul.pricing-table span selector, you select the <span> within the <ul> with pricing-table class. When you use .spans you select any element with class .spans, so the latter has lower specifity. Try something like ul.pricing-table span.spans instead of .spans and read this to deeper understand the point https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#:~:text=Specificity%20is%20the%20means%20by,different%20sorts%20of%20CSS%20selectors To quickly compare selector specifity you may want to use something like this https://specificity.keegan.st/
ul.pricing-table span {
display: block;
font-size: 40px;
font-weight: bold;
color: #222;
padding: 30px 0;
line-height: 1.3;
}
ul.pricing-table span.spans {
display: inline;
font-size: 14px;
font-weight: normal;
padding: 0 0;
line-height: 1;
}
<ul class="pricing-table">
<li>
<p>This is more of a test <span class="spans" style="color: #e03e2d;">do red</span> and <span class="spans" style="color: #34495e;">do black</span></p>
</li>
</ul>
This is a CSS specificity issue. Your selector (.spans) is composed of one class when the selector from the file (ul.pricing-table span) is composed of one class plus 2 elements. Unless you use !important which you shouldn't, where ever you put your CSS the "stronger" selector will always prevail. As an example you could change your selector to p > span.spans
i have a main "div" with multiple divs and "a" tags and i wanted to set a "template like" css to make them all look the same, but some of the A tags need to be different so i thought about making it like this:
<div class="main">
CLick A
<br/>
CLick B
<br/>
CLick C
....
</div>
and on the css:
.main a{
/* Links Scheme */
}
.exception{
/* particular link css */
}
But the browser gives preference to my "template" instead of the particular class. shouldn't the class be the most important or am i missing something?
FIDDLE Link
PS: without the use of "!important" tag please
This is an issue of specificity. Since .main a includes a class and a tag name, it is more specific, and thus gets higher precedence than just a class name.
So, to solve it, use .main .exception for your exception.
.main a is more specific then .exception. I think what you are going for is:
.main a{
/* Links Scheme */
}
.main a.exception{
/* particular link css */
}
In css, orders are also determined by how specific the selector is, so try changing .exception to .main a.exception.
jsFiddle: http://jsfiddle.net/jdwire/DFNyW/2/
you can use :not() pseudo-class, The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. so you can fix code like this:
.main a:not(.exception){
color: #3b5998;
outline-style: none;
text-decoration: none;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
.exception{
color: #0498ba;
font-family: Verdana, sans-serif;
font-size: 30px;
letter-spacing: 2px;
margin: 0 0 0;
padding: 0;
font-weight: bold;
text-decoration: none;
}
<div class="main">
CLickA
<br/>
CLickB
<br/>
CLickC
</div>
I'm learning CSS and html and am stuck on retaining the look of the hover/active state after an item has been clicked. I've looked at several posts on this site and haven't been able to apply the lesson to my application. I also found a solution here http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ but it didn't work for me (I'll assume it's my fault).
Another source suggested using a span class which is what I'm currently trying. I want to have the same hover color (#fff), weight (bold), and background image in use when a menu item is selected to show the user exactly where they are (this is in the secondary sidebar nav and comes in to use on those pages where the main nav has a dropdown with multiple otions). The only characteristic that's working for me is the bold text. You can see the work in progress here:
http://www.mentalwarddesign.net/dynamec/About/index.html
I'm assuming the class I've created in the span is being overridden, but I'm at a loss as to the remedy. Any and all help would be greatly appreciated.
Following is the code for the li and then the corresponding CSS. Thanks in advance!
<ul class="nav">
<span class="chosen"><li>What We Do</li></span>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}
Ed, the CSS selector :active means "Being activated (e.g. by being clicked on)", not "Having an href attribute that resolves to the URL of the current page". You can use server-side logic to insert a class=”chosen” or similar. E.g:
<li class="chosen">What We Do</li>
And, CSS style: ul.nav li.chosen a { }
There is another way to do it as mentioned on the tutorial link you gave, however it is not a good example.
Well first of all, you cannot wrap an li inside of a span. The only direct descendent of a ul is a li. You can put the class chosen directly on to the li and it works just fine.
<ul class="nav">
<li class="chosen">What We Do</li>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
Put the chosen class in the li element itself. Drop the span altogether.
EDIT:
Sorry, in the a element, i meant to say.
A span is a tag, a class is just an identifier. They don't really have anything to do with one another except a class can be used to apply a style to a span but that's true of any tag.
In your case you're trying to put a span (an inline element) around an li (a block level element). In HTML inline elements should not contain block elements.
You should be able to just do it like this: EDIT fixed based on the actual CSS
<li>What We Do</li>
I have an <li> element on the page that I want to look a certain way. Changing the css affects all the <li> elements.
here is the element I want to change
<li>Outside Job<span class="toggle"<input type="checkbox" /></span></li>
here is my css for the <ul><li>
ul li {
/*font: normal 17px Helvetica;*/
color: #a9a9a9;
border-top: 1px solid #333;
border-bottom: #555858;
list-style-type: none;
padding: 10px 10px 10px 10px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
overflow: hidden;}
The commented out font portion and the color is what I want to affect this <li> and not any others.
How would I do this? Thank you!
If you can set a id or a class on the LI, then it would be trivial..
ul li {
color: #a9a9a9;
border-top: 1px solid #333;
border-bottom: #555858;
list-style-type: none;
padding: 10px 10px 10px 10px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
overflow: hidden;
}
ul li.special {
font: normal 17px Helvetica;
}
<li class="special">Outside Job<span class="toggle"><input type="checkbox" /></span></li>
Aside from that, there is no simple way to do this cross-browser with css alone.
Basically, you just need to give it an extra identity/attribute so you can have a CSS selector to style that li tag. Example:
/*using class*/
ul li.different {font: normal 17px Helvetica;}
/*using attribute, title in this case*/
ul li[title=diff] {font: normal 17px Helvetica;}
/*using id if it's one and only*/
#id {font: normal 17px Helvetica;}
Or use an inline style, STYLE= on the LI itself:
<li style="font: Helvetica; color: #a9a9a9;">...</li>
On a side note you should probably think about adding additional fallback sans-serif fonts to that rule aside from Helvetica. I'm a big fan of that typeface, but most people don't have it on their computers.
EDIT: Someone posted my same answer while I was writing this one. I'll keep the sidenote though because its useful.
As previously said, either a class or id will do it - depending whether you're going to be using this particular style uniquelly for this list item, or plan to use it elsewhere (though you can only use an id once on a page, you can reuse an id on another page).
You can mix and match classes and ids within one list, so that even if you want different styles for each list item in your list you can do it using different classes and ids.
For example, you can have your style that styles your list by default, so that items with no class or id inherit the default style, and then any number of classes and ids that can control the individual items...
<code><pre>
<ul>
<li>blah blah blah</li>
<li class="special">blah blah blah</li>
<li class="special">blah blah blah</li>
<li id "extraspecial">blah blah blah</li>
<li>blah blah blah</li>
</ul>
</pre></code>