I have a table with a bunch of items, say 20. Every other row has a specific background color and the items in the cell do as well.
I achieve this with the following piece of CSS:
#item_list tr:nth-child(even),
#item_list tr:nth-child(even) input[type="text"],
#item_list tr:nth-child(even) input[type="number"] {
background-color: #d4d4d4;
}
My question is whether there is a neater way to end up with the same styling? Specifically without the repetition of
#item_list tr:nth-child(even)
or not?
Not using CSS.
If you use a pre-processor such as SASS or LESS then you could get syntax like:
#item_list tr:nth-child(even) {
background-color: #d4d4d4;
input[type="text"],
input[type="number"] {
background-color: #d4d4d4;
}
}
Related
We have a generic css style defined like this:
.table-container table tr:hover td {
background-color: #eaeaea;
}
This is used for all tables across application. However, I have to override it for a particular table on specific rows. I am attaching new css style at each <tr class=‘edited’> with this definition:
.edited {
background-color: #f8cbad;
}
But, when hovering over the row, it is using generic hover style, and I am not able to override it.
Can you please suggest how to override it so that I see same background color as edited style even on hovering the row?
I tried with following and tweaking, but didn’t work.
.table-container table tr:hover .edited td {
background-color: #eaeaea;
}
Ok, I have figured out after some trial. Answering to help others:
Defining hover for the specific style class did the trick:
.edited {
background-color: #f8cbad;
}
.edited:hover {
background-color: #f8cbad !important;
}
I'm working with a project where the placeholder color was defined globally by developer. But now I need to style a form with a different placeholder color. How can I address it correctly?
js fiddle
CSS
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
.box input::-webkit-input-placeholder, .box textarea::-webkit-input-placeholder {
color: blue;
}
.box input:-moz-placeholder, .box textarea:-moz-placeholder {
color: blue;
}
.box input:-ms-input-placeholder, .box textarea:-ms-input-placeholder{
color: blue;
}
Try this code:
http://jsfiddle.net/vyDns/3/
you where close only needed to add .box in front like:
.box::-moz-placeholder
Cheers
Simply because I think the other answer by Filip Huysmans was just copied from Vucko's comment. I am going to also answer it and explain why your code didn't work.
Lets use this one as an example:
.box input::-webkit-input-placeholder {
color: blue;
}
Here you are selecting .box and then trying to find an input to change the placeholder colour. If your code was like this:
<div class="box">
<input placeholder="blue" />
</div>
It would have worked. In the code above you are selecting the class .box and then finding all inputs within it.
DEMO HERE
Now in your code we have:
<input class="box" placeholder="blue" />
So you are already in the input, thats why your code didnt work. There is no input in the input. So taking away input from the CSS and leaving just .box means you are selecting just that input.
.box::-webkit-input-placeholder
DEMO HERE
Hope this explains it well enough for you to understand where you went wrong.
You can reach your target in several solutions.
In the first one, you should change your HTML markup. With your CSS, you first search for the class "box", and the for the input element. So the working HTML markup would be:
<span class="box"><input /></span>
While the span element could be any other element, it should just have the box as class.
Demo 1
The second solution is to write the input (and also textarea) in your CSS in front of the .box element. So you call only input and textarea elements which have the "box" class.
input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder {
color: blue;
}
Demo 2
The last solution is to delete the input and the textarea part. So you'll call all elements, which have "box" as a class.
.box::-webkit-input-placeholder {
color: blue;
}
Demo 3
This worked for me
-webkit-text-fill-color: white;
opacity: 1;
Just add it in the input/text area tag directly
eg. https://codepen.io/anon/pen/LqgOOp
I have the following situation :
.table_green {
background: #B4E391;
}
.data_table tbody tr:hover {
background-color: #fff;
cursor: pointer;
}
.unclickable_table tbody tr:hover {
background-color: inherit;
cursor: default;
}
Now the tr originaly is green color, and i want when a table has class='data_table unclickable_table' set, that on hover on a tr that has table_green class, the background-color property won't change and stay green, but inherit doesn't seem to work
Example html :
<table class='data_table unclickable_table'>
<tbody>
<tr class='table_green'>
<td>Untill it goes Click!</td>
</tr>
</tbody></table>
Or this fiddle : http://jsfiddle.net/nyDNc/1/
Any help?
This is a solution, hopefully one that will work within your structure cause it depends on how you're styling your table elements.
inherit won't work because it is inheriting from the table which has a background of none. Instead you can have the tr set and change the colour of the td on hover, so that it has a context to inherit from.
See the working example here on JSFiddle.
The CSS is:
.table_green {
background: #B4E391;
}
.data_table tbody tr:hover td {
background-color: #fff;
cursor: pointer;
}
.unclickable_table.data_table tbody tr:hover td {
background-color: inherit;
cursor: default;
}
Why do you add a second class in order to override the effect the first class has. Why don't you just remove the 'data_table' classes on the rows you don't want the effect on.
i'm not sure i understand You very well, but
DEMO IS HERE:
http://jsfiddle.net/nyDNc/1/
I'd like to use the tr:nth-child(even/odd) pseudo class for a table, but I want to support the IE 2 population as well. So, is there any purely css way to add a border to tr if nth-child isn't supported?
You can try Selectivizr, I think that's the easiest solution.
EDIT:
You could also use jquery to add classes for you:
$(function() {
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
});
EDIT2:
Also, if you're using Modernizr, you could try this.
EDIT3 :)
tr { border-bottom: 1px solid #ccc; }
tr:nth-child(odd),
tr:nth-child(even) { border: none; }
tr:nth-child(odd) { background: #eee; }
tr:nth-child(even) { background: #ddd; }
You could add + between your classes/elements to do like in this example below, every 5 <tr> remove the margin-right
tr{margin-right:10px;}
tr + tr + tr + tr + tr{margin-right:0;}
A great replacement for NTH pseudo-classes without any javascript and IE7+ compatible ;)
I'm using jQuery validate on a form I am building and it is working great. What I want to do is when something is invalid to have the text field change colors and the error message to be white. I figured the following CSS would work:
label .error {color: white; font-weight: bold;}
input .error {background-color: pink; border: 1px dashed red; color: white}
When I test the validation the above CSS doesn't seem to apply. I checked using Firebug and the label and input area have the 'error' class applied.
The CSS seems valid as when I leave off the .error clause everything looks like I want it too. What am I doing wrong?
One space can be one too much. Try:
label.error {color: white; font-weight: bold;}
input.error {background-color: pink; border: 1px dashed red; color: white}
Background info:
label .error /* selects all elements of class "error" *within* any label */
label.error /* selects labels of class "error" */
Try label.error and input.error without spaces.