I have the following problem, i need the "ul[editable] li" class to be dominant over "#menu li". I know I can use !important as follows:
#menu li {
border:solid 1px #9f693a;
outline:solid 1px #89552a;
background:url(images/bg.png);
}
ul[editable] li {
background-color: #333333 !important;
border-color: #0d0d0d !important;
color:#fff !important;
}
I want to say something like this:
ul[editable] li !important {
....
}
Is there a way to do this?
Thanks!
Nope, you cannot use the !important statement in the selector. The only thing you can do is make the second selector more specific, (Or the first one less specific of course).
For example:
#menu li {
border:solid 1px #9f693a;
outline:solid 1px #89552a;
background:url(images/bg.png);
}
#container ul[editable] li {
background-color: #333333;
border-color: #0d0d0d;
color:#fff;
}
I guess you already knew this though. :)
Related
I have a style rule:
.tabs li {
border: 1px solid transparent;
}
.tabs li:not(:last-child):not(:nth-child(2)):hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
which should change the color of the li's background and border for all elements except second and last element when you mouse over them. But somehow it works for all li elements. What CSS rule should I use?
UPD
saNiks's answer helped me to find a solution. Here is what css code should looks like:
.tabs li {
border: 1px solid transparent;
}
.tabs li:hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
.tabs li:last-child:hover, .tabs li:nth-child(2):hover {
background-color: transparent;
border-color: transparent;
}
You need to rewrite your styles to use the :not selector in applying your desired default style as follows
.tabs li {
border: 1px solid transparent;
}
.tabs li:hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
.tabs li:not(:last-child):not(:nth-child(2)):hover {
background-color: transparent;
border-color: transparent;
}
Working JSFiddle Code here
You can add a class for the specific <li> tag that you want to change, for example:
<li class="some_class_name"> Some content</li>
and than to add style to this <li> by
.some_class_name{...
\\your style goes here}
Why not just do this? If the second item "AND" the last item is to be styled,
.tabs li:hover:not(:last-child):not(:nth-child(2)) {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
so i was wondering if this where possible.
i am building a navigation.
<nav id="navigation">
<div class="nav_buttons">home</div>
<div class="nav_buttons">system</div>
<div class="nav_buttons">studies</div>
<div class="nav_buttons">approach</div>
<div class="nav_buttons">about</div>
<div class="nav_buttons">contact</div>
</nav>
but what i would like is so that when i hover over one of them both the border of the div and the color of the < a > tags text change at the same time
i tried this
#navigation {
text-align: center;
height: 150px;
padding-top: 100px;
}
.nav_buttons {
display: inline;
height: 40px;
width: 100px;
border-bottom: 1px solid black;
margin-left: 20px;
}
#navigation a{
margin-right: 50px;
font-size: 20px;
text-decoration: none;
color: black;
}
div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
div.nav_buttons:hover a{
color:#ff3300;
}
but that only changed the boder. i am willing to use javascript but i saw that you can change a child element buy hover overing the parent.
div#parent_element:hover div.chil_element {color: red;}
any suggestions doing it simply in CSS would be epic??
it depends for a matter of (previous) rule specificity, since you assigned the style with #navigation a selector. So try this
#navigation > div:hover a {
color:#ff3300;
}
or try simply with !important
div.nav_buttons:hover a {
color:#ff3300 !important;
}
As a side note: you could also avoid to use a repeated class name for every div in the markup and use instead #navigation > div to refer those elements
Your code is fine. But I think some existing styles are overriding your current style. So I suggest to use relative styling technique like below to achieve the desired result:
#navigation div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
#navigation div.nav_buttons:hover a{
color:#ff3300;
}
See a DEMO
im working on this site at the moment and and cant figure out why this shouldnt work..
Im looking to put small borders on the bottom and top of each controlnav link (seen on the right of the slides), If anyones got any pointers itd be great...
http://limerickfc.hailstormcommerce.com/cms/
.nivo-controlNav a + a {
border-top: 1px solid #000000;
}
I will just include a small bit more css for clarity so you can see what im talking about...
.nivo-controlNav {
text-align:center;
position:absolute;
right:-180px;
height:474px;
width:180px;
top:0px;
z-index:8;
}
.nivo-controlNav a {
cursor:pointer;
height:68px;
padding: 13px 20px;
width:140px;
display:block;
background: url('http://limerickfc.hailstormcommerce.com/cms/wp-content/themes /limerickfc/images/slideshowBg.jpg') scroll 0 0 transparent;
background-repeat: repeat-y;
color: #6ED5FF;
}
Thanks!
Having looked at the attached page using Firebug you have this style declared in your inline stylesheet
#slider a {
border: 0 none;
display: block;
}
If you remove the border: 0 none; line the border will appear, it is currently overriding your NivoControlNav style.
There are two offending CSS rules
.nivoSlider a {
border:0;
display:block;
}
Your selector, .nivo-controlNav a + a has slightly more specificity than .nivoSlider a, so yours should win out. However, there is also this rule:
#slider a {
border:0 none;
display:block;
}
The ID in this rule gives it much more specificity than yours. Either remove the border property from this rule, or add an ID to your selector to give it more specificity.
More on CSS selector specificity.
The background color, font color and border are being lost when I drop an element.
How do I keep these properties intact? Here is the project in jsFiddle:
http://jsfiddle.net/n2learning/tV4n7/48/
Thanks!
Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:
.droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Here's the working example.
Your CSS rule:
#routinefilter .droptrue{
only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:
.droptrue{
Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:
#routinefilter .droptrue,
#dropTargetframe .droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle.
Or you could simply remove the ancestor id from the selector, to give simply:
.droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle demo.
This should do the trick.
#routinefilter .droptrue, #dropTargetframe .droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
The .droptrue elements will keep the same css style when inside the box as well!
Edit:
You can also change it to only .droptrue if you want those boxes to use this style wherever they are.
Change
#routinefilter .droptrue
into
.droptrue
Edit: Whoops, too late :)
Add to CSS
.droptrue
{
font: 16px serif
background: none repeat scroll 0 0 lightgray;
border: 2px solid #666666;
color: navy;
margin: 10px;
padding: 5px;
}
I'm pretty new to CSS but I'm hoping this is just something obvious I'm missing.
On www.sonogenics.co.uk, the Twitter block appears to be floated to the right or have 40px left margin. I have explicity set the margins to be 0px and cleared the floats etc but there has been no effect. From the Firefox WebDeveloper addon, it appears to be a problem with the .tweet ul but I can't seem to fix it. Can someone explain to me what is going on?
Cheers
Chris
It actually has left-padding and not margin. This is the default styling of a ul element. To cancel it, you should put padding:0; in the #tweet ul style declaration.
A couple of suggestions:
Use Firebug for development, it is far superior to the WebDeveloper add-on. I was able to immediately spot the problem using it
Use a CSS reset stylesheet, to remove those default style declarations and normalize it across browsers (the defaults are not consistent between browsers). The best known is the CSS reset by Eric Meyer, which I personally use on every site I develop.
#chris robinson; i checked your twitter/style.css your main problem is that you declare css wrongly that why the properties are not working.
wrong css declaration :
.twitter #tweets {
background: #111;
padding: 0 0px;
padding-bottom:20px;
text-align:left;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:2px;
margin:0px;
}
.twitter ul, li {
list-style-type: none;
background: #222;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:1px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin:0px;
-webkit-padding-start:10x;
}
.twitter #tweets a {
color: #AAA;
text-decoration:none;
}
.twitter #tweets a:hover {
color: #AAA;
}
if you check your html your twitter class is inside #tweets not outside of it . So, first correct your css .
Correct css:
#tweets .twitter {
background: #111;
padding: 0 0px;
padding-bottom:20px;
text-align:left;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:2px;
margin:0px;
}
#tweets ul.twitter li {
list-style-type: none;
background: #222;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:1px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin:0px;
-webkit-padding-start:10x;
}
#tweets .twitter a {
color: #AAA;
text-decoration:none;
}
#tweets .twitter a:hover {
color: #AAA;
}
This should fix it
#tweets ul { padding: 0px; }
uls have a left padding by default in most browsers (i.e. WebKit 40px).
Your styling isn't being applied because of your css selector. Your selector is
.twitter ul, li {}
while your html for the elements are
<div id="tweets">
<ul class="twitter">...</ul>
</div>
Your css selector says "style all ul and li that are descendents of any element with the 'twitter' class". Since the ul isn't contained in an ancestor element with the "twitter" class, it isn't being styled with that rule.
If you want the rule to actually apply, you can either just use the selector
.twitter {...}
or you can re-class the parent div with "twitter",
<div id="tweets" class="twitter">
<ul class="twitter">...</ul>
</div>
or you can use this selector instead,
#tweets ul, li {...}
which more closely matches your original selector.