I'm trying to get text color to change and the text to be underlined when the link is selected (it will have class "selected"). For some reason I can't get it to work even with !important. And yes, I know "a" should be inside "li" :)
HTML:
<a href="">
<li class="list selected">
<table>
<tr><td class="first">Text here</td><td class="second"><div class="icon-arrow-down"></div></td></tr>
</table>
</li>
</a>
CSS:
table {
.selected {
color:green !important;
text-decoration:underline !important;
}
}
Here's my fiddle http://jsfiddle.net/vwLu8/1/.
Your selectors should not be nested unless you're using a preprocessor, you also need to change your level of specificity, change your CSS to:
Demo Fiddle
.selected table td{
color:green;
text-decoration:underline;
}
More on specificity from MDN
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
Related
How should I go about changing the color of a span on mouseover? I currently have a tab (like in a menu) that has been classified as a span, let's say .rtsOut with a background color of #595959. Each tab is still classified as the same span, .rtsOut, but is divided into 4 different tabs. When I mouseover, I'd like to change that one tab to to, #000000, and to revert back to #595959 when the mouse is moved off of the span.
I unfortunately don't have access to the whole overlook of CSS like so:
<style>
span:hover {
background: ######;
}
</style>
and instead I have a very simple view like this, where I just input single lines of code:
#SampleThing {visibility: hidden;}
Can anyone help me? I've been Googling, and testing for hours, and can't come up with a solution.
So far, this is what I've found. I believe this is how the span has been created:
<li class="rtsLI"> == $0
<a class="rtsLink tbLeft4" id="TbInformation" href="../Info/Info.aspx">
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>
</a>
</li>
And I've tried changing the background color of that span using this:
.rtsOut:hover {background: #000000;}
However, that line of code isn't working :(
Take a look at my codePen here
CSS
.rtsOut:hover{
background-color: red;
}
HTML (Assuming it looks like this)
<div>
<p>
<span class="rtsOut">One</span>
<span class="rtsOut">Two</span>
<span class="rtsOut">Three</span>
</p>
</div>
Also note that if you would like some more flexibility down the road, you may want to look into using <ul> and <li> for Nav Menu items.
When I mouseover, I'd like to change that one tab to to, #000000, and
to revert back to #595959 when the mouse is moved off of the span.
.rtsOut:hover {background: #000000;}
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>
Assuming that your HTML really is:
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>
and this isn't working:
.rtsOut:hover {background: #000000;}
Then, it tells me that someone has generated styles that are "more specific" than the ones you are providing.
CSS styling rules are applied from "most specific to least specific". For example: parent > .rtsOut { background-color: red; } will take precedence over .rtsOut { background-color: blue; } because it is more specific. As well, inline styles will have one of the highest precedence, so <span class="rtsOut" style="background-color:red;"></span> will override .rtsOut { background-color: blue; }. See http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ for more information.
I would start by adding !important to your styles (as this will always have the highest precedence if nothing else has been given !important), to see if the above is the case.
Also, I would most definitely get used to browser developer tools. They allow you to delve right into the active code and do live edits. You will be able to see if there is an inline style or another style rule that has more precedence over the one you are trying to provide.
I am trying to change the cursor on hover when mouse cursor hovers over a table. The view here is written in ruby-rails. I tried simply adding
.custom > table:hover·
{
cursor: wait;
}
adding the above to custom.css.scss
And then I added the below code to my view
<table class="nav nav-tabs custom">
This does not seem to work.
I know the css code has to be within some block but I am not sure of the exact way of going about it especially within ruby on rails. Any way to correct what I am doing wrong?
EDIT:
Thanks for the suggestions.
I tried this
table.custom:hover{
cursor:wait;
}
although this works in the table header it does not work for the part where the data within the table is being rendered:
<table style="display:none" class="nav nav-tabs custom">
<%= render ClassName.new, :index => 'N_TYPE' %>
</table>
And rendering columns similar to this
<td><%= label_tag :p_type, p_type.p_type %></td>
.custom > table:hover·
{
cursor: wait;
}
What your CSS does is it looks for a children table inside a selector with class .custom. So it wont work for your HTML.
The proper way is
table.custom:hover{
cursor:wait;
}
which looks for a table with the class name .custom and applies CSS
Fiddle
In your style you have made use of the child combinator ">". Child combinator is used to apply CSS to child elements of the selected element.
For eg.
HTML:
<ul>
<li>First</li>
<li>Second</li>
</ul>
CSS:
ul > li {
width: 100px;
}
will apply style on both "li" as they both are child of "ul".
In your case you need to apply css on direct element. For that purpose you don't need to use child combinator.
Also you are making of CSS Pseudo classes. This classes can be directly apply to element.
Eg.
#mycustomid:hover
.mycustomclass:hover
elementname:hover
Check attached jsfiddle code.
http://jsfiddle.net/zgjx7ymr/
There is no child table elements under the class custom. Try like this.
table.custom:hover
{
cursor:wait;
}
I am trying to run this CSS:
.portfolio-carousel.title a {
text-decoration: none;
}
On this HTML:
<ul class="portfolio-carousel">
<li>
<h4 class="title">
Yahoo
</h4>
</li>
</ul>
But I'm nothing is changing and I'm not sure why.
Your selector is incorrect, you need a space between the class-names to indicate ancestor-descendant relationship:
.portfolio-carousel .title a {
/* CSS here */
}
JS Fiddle demo.
Your original CSS selector was looking for an a element that was a descendant of an ancestor with both classes portfolio-carousel and title, whereas you want an a element that is the descendant of a .title element itself the descendant of .portfolio-carousel element.
References:
CSS Selectors, Level 3.
I have defined a class in my main.css file.
.red {
color: #d14;
}
And using it like this.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active red">
<i class="icon-leaf icon-white"></i>Admin
</li>
</ul>
</div>
</div>
Besides my main.css I also import the twitter bootstrap css file.
This way it does not work. Is it because Bootstrap is overruling my color definition?
The only element in your markup that could visually apply this style is the <a>, and that element has a lot of really specific CSS rules applied to it by Twitter Bootstrap, stuff like this:
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color:#FFFFFF;
}
You'll have to write something even more specific to get the style to apply:
.navbar .navbar-inner .nav .red a {
color: #d14;
}
Demo: http://jsfiddle.net/pYGaG/
You could use !important on the rule if you really had to, but I really feel that you should avoid it as much as possible. If this is a single element that has this style, consider adding an id to it, which carries a lot of weight specificity-wise:
<li class="active" id="home_link">
<i class="icon-leaf icon-white"></i>Admin
</li>
#home_link a {
color: #d14;
}
http://jsfiddle.net/pYGaG/1/
Here are a couple good articles on CSS specificity:
http://css-tricks.com/specifics-on-css-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
And as a side note, try to avoid presentational class names like red. Use more meaningful ones that aren't tied to the way it should look, but what it is (for example, .active-link).
Your're defining the red color on a <li>-Tag, but there is no text. The text is inside the <a>-Tag, so you need to overwrite this rule.
Code something like this:
.red a {
color: #d14;
}
Update: Go for the answer given by Wesley Murch.
Odd CSS behavior.
When i set the visited color using CSS(a.nav:hover as below example) then the hover doesn't work once the link is visited by the user. However when i set it with the reference of the parent element(.header a.nav:hover as below) it works. why ?
a.nav:visited{
color:yellow;
}
/*once the link is visited by user this rule not working*/
a.nav:hover{
color:red;
}
/*if we use this rule it works even after the link is visited*/
.header a.nav:hover{
color:red;
}
<div class="header">
<a class="nav" .. >test </a>
</div>
It sounds like a specificity issue. Do you have any other a pseudo-selectors in your CSS? If there's a selector which is more specific than a.nav:hover (such as .header a.nav:hover) then it will override it, regardless of its position in the file.
a.nav:hover,
a.nav:visited:hover{
color:red;
}
or
a.nav:hover{
color:red !important;
}
Should make it work.