Picked up a friend's CSS project to help out. I'm not an expert in CSS, here it goes:
I can't seem to find a direct answer. I am creating a table and I want 2 types of TH class that uses differnet background color in a table.
(also i might need some help on the DIV tag)
The css I'm using is like this can someone tell me what am I doing wrong?
<div class="one"><div class="two">
<table>
<TR><TH> one color </TH></TR>
<TR><TH class="color">differnet color </TH></TR>
</table></div></div>
.one .two th {
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #000000;
}
.one .two th .color{
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #ffffff;
}
Remove the space between th and .color
Otherwise you're looking for a .color descendant element inside the th, not for the class on the th itself.
Related
How can I highlight all spans and divs in my html that have classes that are not styled? this is for debugging purposes, to remind me what I will still have to fix up.
Use border to highlight the span and div elements
Do either:
span, div{
border: 1px solid red;
background-color: yellow;
}
Or:
.unstyledClassOfDivAndSpan{
border: 1px solid red;
}
I would add an XXX class to all the elements, then use this definition:
.XXX {
border: 5em solid red;
background-color: green;
}
Make sure this is at the end of the stylesheet so it doesn't get overridden. Then as elements are done, remove the XXX class.
Please Use this Css Hover Style for highlight all spans and divs in your html
div, span{
border: 1px solid red;
background-color: Black;
}
div:hover, span:hover{
border: 1px solid Black;
background-color: red;
}
OR
*Please Use this Css and Jquery Hover Function for highlight all spans and divs in your html*
.hilight{
border: 1px solid red;
}
$(function(){
$("spna div").hover(function(){
$(this).toggleClass("hilight");
});
});
I'd like to set a background and a rounded border on a <tbody/>, such as
tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }
However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.
I'm able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example
tbody tr:first-child td:first-child { border-top-left-radius: 15px; }
This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that'll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?
Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.
Codepen example
CSS
table {
width: 100%;
border-collapse: collapse;
display: block;
width: 600px;
}
tbody {
background: #ccf;
border: 1px solid black;
border-radius: 15px;
display: block;
}
th, td {
width: 200px;
}
td, th {
padding: 5px;
text-align: center;
}
I have styled all my text fields with a gray border, and for the fields with class="form_field_error", I want the border-color to change to red.
I have tried the following code, but I can't get my class to override the previously defined border? What am I missing?
HTML:
<input type="text" name="title" id="title" class="form_field_error">
CSS:
input[type="text"] {
display: block;
height: 15px;
font-weight: normal;
color: #777;
padding: 3px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.form_field_error {
border: 1px solid #f00;
}
I created a jsFiddle to illustrate the problem.
The input[type="text"] css takes precedence over the .form_field_error css.
Change it to input.form_field_error and the border will work.
Try this:
.form_field_error {
border: 1px solid #f00 !important;
}
I would recommend using:
input[type="text"].form_field_error {
border: 1px solid red;
}
The "!important" rule should only be used as a last resort - nuclear option - because it will surpass all other attempts to target an element based on precise and relevant specificity, reducing the control you have and creating potential roadblocks for future developers. Therefore the proper way, and the best way to handle it is to start with the same selector as the original one you are trying to override, then simply add the one thing that distinguishes it from the original. This way the specificity will be precisely what you want.
Have you tried specifying which div to apply the red border to like this?
input.form_field_error {
border: 1px solid red;
}
And on a side note - the ID you set as 'title' is that just for that one or are you thinking of reusing that?
Because you could also do ->
#title.form_field_error {
border: 1px solid red;
}
I have the following CSS for my table :
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-bottom: 1px solid #a2a2a2;
}
I want my table to have a black border and inside, the line are supposed to be separated by a grey border. However the bottom border of the table is overridden by tr and is grey instead of black.
How can I manage to give the priority to the table border against the tr border?
Move your bottom border to the top for the tr, and set the first tr to have no border:
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-top: 1px solid #a2a2a2;
}
tr:first-child{
border:none;
}
jsFiddle to demonstrate it working (with slightly modified border colours and sizes to help them show up better in the demo)
Note that this solution involves slightly more CSS code than other valid solutions, but has the advantage of better browser compatibility. (:first-child is CSS2, whereas :last-child is CSS3)
[EDIT]
As per OP's comment below: To prevent the cell borders bleeding into the table border, we need to do the following:
Remove the border-collapse:collapse. This is what is making the borders combine together causing the bleeding effect.
Put the inner borders on the cells (td) rather than the rows (tr). This is necessary because without border-collapse, we can't have borders on the tr.
Add border-spacing:0 to the table. This closes up the gaps between the td elements, which would show up now because the border is on them rather than the tr.
Here's the finished code:
table{
border: 4px solid blue;
border-spacing:0;
}
td{
border-top: 4px solid red;
}
tr:first-child>td{
border:none;
}
And here's an updated version of the fiddle: http://jsfiddle.net/T5TGN/2/
use :not(:last-child)
table{
border: 1px solid black;
border-collapse: collapse;
}
tr:not(:last-child){
border-bottom: 1px solid #a2a2a2;
}
Please see this: http://jsfiddle.net/JSWorld/QmuA9/1/
Update the table css like the following
table, tr:last-child
{
border: 1px solid black;
border-collapse: collapse;
}
You can check the Demo
try adding padding-bottom to the tr:
tr{
border-bottom: 1px solid #a2a2a2;
padding-bottom: 1px;
}
.myclass {
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
Is it possible to group properties that share a common definition, such as border-top and border-bottom in the example above.
Something like:
.myclass {
border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
background: #F2F2F2;
}
TIA,
You can using LESS or SASS (I believe), but if you don't want to use those, you can instead group selectors that will have the same property:
.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
{
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
This will apply the style to all the elements.
Unfortunaly border doesnt have a shorthand version (Like say margin/padding for example), it has to be the same for all, or different.
However what you can do - is say you want to style one side uniquely, is specify all of the box, then underneath it, override it with an individual style. Heres a little fiddle of what I mean.
http://jsfiddle.net/XxWwn/
I think I see what you're trying to do here,
This is the only border shorthand I know, without using SASS/LESS.
.myclass {
border-color: red blue green coral;
border-width: 1px 2px 3px 4px;
border-style: solid;
}
This the same shorthand as margins and padding (TOP, RIGHT, BOTTOM, LEFT)