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;
}
Related
<div class="col-lg-3">
<ul class="nav navbar-nav login-right">
<li>Login or create account</li>
</ul>
</div>
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
I tried to give normal class to each link and just to call that classes in external CSS file but solution fails.
Any idea?
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
You can use nth-child and color both a tags differently
ul.nav li a:nth-child(1){
color:green;
}
And
ul.nav li a:nth-child(2){
color:blue;
}
Since both have the same padding style you can place it in a common style definition
ul.nav li a{
padding:0;
}
Important: make sure the external file which you write this in is placed last in your HTML hierarchy. By CSS prioritisation rule the file placed last in the hierarchy gets the priority.
Edit: seems like you have many elements with same structure. In this case it's better to select specific element and using id will be our best choice. Add id to your ul as below
<ul id="colorMe" class="nav navbar-nav login-right">
And change your CSS selectors to
#colorMe li a:nth-child(1)
Do similar to other selectors too
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.
Im still trying to figure out how to properly use my nth, first, and last child selectors. Thanks for your patience.
If my markup is like this:
<div class="the-wrapper">
<table class="the-table">
<!-- the table -->
</table>
<table class="the-table">
<!-- the table -->
</table>
</div>
How can I select the last <table class="the-table"> to apply a margin?
I thought I could select it like this: .the-wrapper .the-table:last-child { /* css */ } but this does not work. What am I missing? Thank you!
EDIT
Sorry everyone I printed my markup incorrectly... The correct markup is above
The + is used to select "siblings" elements. (siblings in the sense of being childs of the same parent) http://jsfiddle.net/Lhmjq/
You can't use nth-child or last-child for this; as the name say, is for childs, and unless you put a parent, you can't do it.
Here is an example with a parent: http://jsfiddle.net/Lhmjq/2/ In this case, is done with last-child
(updated to your new code)
Here is a tiddle: http://jsfiddle.net/Lhmjq/4/
.the-wrapper .the-table:last-child {
color: blue;
}
Updated with your new code: http://jsfiddle.net/Lhmjq/4/
.the-wrapper .the-table:last-child { /* css */ }
The previous code should select the last table in the wrapper. The targeting for structural pseudo classes can be confusing. The pseudo classes are defined in regards to it's direct parent. For instance, say you have a list of elements:
<ul class="target-me">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
and you want to target the last li in the list. Your CSS would be:
.target-me > li:last-child { color: red; }
You can also use the pseudo selectors to target numbered items from the position in the DOM, say I want to target the second element:
.target-me > li:nth-child(2) { color: red; }
You can also use these pseudo selectors in a selector hierarchy.
.target-me > li:first-child span { ... }
You can also chain pseudo selectors:
.target-me > li:first-child:hover { ... }
In conjunction with a polyfill like Selectivizr you can use these selectors on all browsers. I hope this helps!
Your code ".the-wrapper .the-table:last-child " will return the last-child elements of ALL your ".the-wrapper" classes. What you want to do is select the last ".the-wrapper" element. The code below will select the last-child table of the last ".the-wrapper" element, which is what you are looking for...
$('.the-wrapper .the-table:last-child').last().css("border","1px solid #b5b5b5")
Cheers!
I'm looking to style a li element, and would like to modify this CSS property:
li:before {
color: blue;
}
However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.
Is what I am trying to do, doable, and, if so, how?
You can insert a new stylesheet inline with the following HTML:
<style>
li:before { color: red; }
</style>
The reason this is the only way to do it is that :before is a pseudo-element, meaning that it doesn't actually become part of the DOM. Unfortunately, this means there is no way to style it inline, as requested.
As an example:
<li style="color: red;">text</li>
would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.
In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-
<li style="color: red;">This is a list item</li>
And it would take precedence over either a linked stylesheet, or an internal stylesheet.
If you're wanting to use more complex selectors, you're out of luck unfortunately.
See: CSS Pseudo-classes with inline styles
You can add:
<style scoped>
li:before {
color: red;
}
</style>
Anywhere as a direct child of the <body> element and it will apply to the whole page, while also being valid HTML5.
I'm creating a navigation bar and its made using an unordered list. I want to override my style for the first one so it looks different. I tried changing its class, but the actual style overrides it. Thanks
CSS is order-sensitive.
If you define the styles for the first element, and then define the styles for all elements, then the styles for all elements will take precedence, even for the first element.
Alternatively, if you define the styles for all the elements first, and then define the styles for the first element, then the styles for the first element will take precedence over the styles for all elements when the browser gets around to figuring out how to render the first element.
In the style declarations, use !important, like this:
.myFirstOne {
color: blue !important; /* for example */
}
Make sure you put the !important last. Is there a way you can factor the attributes out of the style attribute and into a class? That would be a cleaner and less tedious way of doing it, as !important must come after every declaration.
See this link for more information on CSS cascading rules.
I don't perfer using !important I'd rather put a class on the first element and style it as such:
<!-- html -->
<ul>
<li class="first">first item</li>
<li>second item</li>
<li>third item</li>
</ul>
/* css */
ul li {
color: blue;
}
ul li.first {
color: red;
}