Say I have the following css:
.InfoTable-main-table tbody tr td:before{
background: #222;
color: #fff;
content: attr(title);
display: block;
left: 0;
padding: .25em .5em;
position: absolute;
top: 0;
width: auto;
}
but I want a more specific css to have none of that i.e.
.InfoTable-main-table tbody tr td.extra:before{
}
However, the previous css still applies. Is there a way to disregard the more general css or will I have to relegate to just applying it to a specific class instead?
Assuming that you're asking for a set of styles applied to table cells without the 'extra' class and styles with the class, the :not() selector seems like a good fit:
.InfoTable-main-table tbody tr td:not(.extra):before{
background: #222;
...
}
.InfoTable-main-table tbody tr td.extra:before{
}
you can use !important after propertive css like this:
.InfoTable-main-table tbody tr td.extra:before{
left: 100px!important;
}
Related
I cannot understand what I have done wrong here. The css styles should be separate for both my tables however "rcorners1" table appears to be affected by the settings of "water_table"
I have two tables the css for first table
table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {background-color: #ffffff;}
table.water_table th, td {
padding: 15px;
text-align: left;
}
My first table looks like
<table border="0" align="center" class="water_table" id="water_table">
The css for my second table
table.rcorners1 {
border-radius: 10px;
border: 1px solid #a4b3bd;
padding: 2px;
margin: 3px;
width: 120px;
height: 160px;
float: left;
}
my second table looks like
<table width="100%" border="0" class="rcorners1" id="rcorners1">
I do not know if this is the correct solution. What I did to correct the issue is to remove "water_table" from the css style file and created a style block within the html before my "water_table" appears.
<style>
table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {
background-color: #ffffff;
/*color: white;*/
}
table.water_table th, td {
padding: 15px;
text-align: left;
}
</style>
Generally you don't want to put an inline style block inside your HTML - if you were to do so, it should be at the head of your document, not in the body.
However, if moving the styles is what solved the problem for you, this means that there's something else in your css file that's overriding your desired styles.
Often times you can see all of the styles associated with an element in a browser inspector. If you were to inspect your element I bet you would see some additional styles that are crossed out from your CSS file.
I'm having trouble removing the inherited styles in a sub-table. My tables basically look like this:
<table class="twocoltable">
<thead>
<tr><th>BlahBlah</th></tr>
</thead>
<tr>
<td>blah</td>
<td>
<table class="nostyle">
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
</td>
</tr>
</table>
EDIT My .css now looks like this. The sub-table has no styles, but the parent table's td styles aren't working, but the th styles are working.
.twocoltable { border-spacing: 0px; padding: 0px; border: 1px solid #666666; }
.twocoltable>thead>tr>th { text-align: center; font-weight: bold; color: black; font-size: 12pt; padding: 4px; background-color: #DDD; }
.twocoltable>tr>td:first-child { text-align: right; vertical-align: top; font-weight: bold; color: black; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; }
.twocoltable>tr>td:last-child { text-align: left; vertical-align: top; font-weight: normal; color: #333333; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; white-space: nowrap; }
.nostyle * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
What I end up with at the end is a properly formatted parent table, but the sub-table also contains the formatting. It still has the bolding, borders, and alignment.
What am I missing?
Assign your styles only to your parent table's immediate children. This should work for properties like margin and padding. I.e.:
Instead of:
.twocoltable th
.twocoltable tr td:first-child
.twocoltable tr td:last-child
Do:
.twocoltable>thead>tr>th
.twocoltable>tr>td:first-child
.twocoltable>tr>td:last-child
However, other properties such as font-weight will still apply to child elements, because they are inherited. For those, you'll have to manually override in .nostyle definitions (which you haven't done). E.g.:
.nostyle {
font-weight: normal; // initial also works
}
EDIT:
Updating my answer with a general overview of what should be the final solution.
.twocoltable th {
// styles that will be applied to all th elements that live inside .twocoltable, including sub tables
}
.twocoltable tr td:first-child {
// styles that will be applied to all elements that are the first td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable tr td:last-child {
// styles that will be applied to all elements that are the last td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable>thead>tr>th {
// styles that will be applied ONLY to th elements that are direct children of tr elements that are direct children of thead elements that are direct children of .twocoltable. This excludes sub table th elements
}
// You should have got the idea by now
.twocoltable>tr>td:first-child {...}
.twocoltable>tr>td:last-child {...}
.nostyle {
// Styles that override styles that are inherited from its parent element even when that style has not been directly applied to it (e.g. font-weight)
}
By using this notation: .twocoltable tr, you will apply that style to all children of .twocoltable that are tr, no matter how deep they are.
You can choose to get more specific by adding classes to your tr elements, etc. Or you can use the child selector, >. It ensures the style is only applied to immediate children: .twocoltable > tr.
By having more specificity with your CSS, a great summary is found linked here, it will take precedence. Maybe using an ID for your main table, and a class for your nostyle cells would be the best way to organize it?
<table id="twocoltable">
<table class="nostyle">
Another option, you can override with CSS using !important, a jsFiddle linked here.
This is a general question, given a html component (a table for example), I want to add a new css class overwriting the current ones. For example I want to overwrite the td hover of the following table, adding a new class in order to do not affect the other tables that use the classes in common:
html (using bootstrap classes)
<table id="calDate" class="table table-striped table-bordered table-condensed table-hover alignCenter">
<tbody>
<tr>
<td>
<tbody>
</tbody>
table>
css
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
max-width: 90%;
margin-bottom: 5px;
}
.table th,
.table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
background-color: #f5f5f5;
}
I try to overwhrite the last class creating a new one named .alignCenter, trying to change the td hover behavior and also the text-align, the aligment worked but the mouse over it doesn't worked:
.alignCenter {
}
.alignCenter-hover tbody tr:hover > td,
.alignCenter-hover tbody tr:hover > th {
background-color: #df8505;
}
.alignCenter th, .alignCenter td{
text-align: center;
}
What's the usual way to create a new css class overwhiting the existent classes?
How can I use the new created css class to change the td hover behavior for example change the background color?
In the example the class .table has max-width: 100%; and it's defined again below with max-width: 90%;. Which max-width is used in the table, and why?
Ok, let me answer your questions one by one:
-1. What's the usual way to create a new css class overwhiting the existent classes?
You can overwrite those by either modifying the classes themselves or add a different value for another class on the same element (or inline style them).
-2. How can I use the new created css class to change the td hover behavior for example change the background color?
Simply do this:
tr:hover td {
/* do hover stuff */
}
-3. In the example the class .table has max-width: 100%; and it's defined again below with max-width: 90%;. Which max-width is used in the table, and why?
In CSS it's always the most recently (last) command that will "win". You can, however, override that using !important like this:
.table {
/* ... */
max-width: 90% !important;
/* ... */
}
And more: get rid of the table-hover, it's unnecessary; instead set up its hovered variation like this:
.table:hover {
/* stuff goes here */
}
Take a look at this:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
the class attributes at the class below the other class will count (so the order of the stylesheet matters), else you can use ex:
max-width:90%!important;
or choose are more specific selector
Thing is,
You have to create new class.
.old
{
//already have
}
.new
{
// do your stuff with !important so it will take this
// background-color:#fff !important
}
or
td:hover > .new
{
// do your stuff
}
I am learning how to create classes in CSS with MVC4 and Razor. I want to create a class for a table that is displayed on my home page with special markup classes for td elements with strikethrough, and some td elements bolded. I do not know how to create a class that belongs to another class. I feel that by making sub classes in my table class, I can keep more organized and clean CSS code.
I have a few questions.
How do I create a new table class that inherits from the base table?
Should I put new classes in a separate CSS file?
If answer to previous question is yes, then what do I need to do for
Razor and MVC4 to see the new file?
How do I create a td element under that new table and cause it to
inherit from the base td of the base table?
see code below
/* tables
----------------------------------------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}
th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-right: 0.4em;
}
th:first-child{
margin-left:0px;
}
th:last-child{
margin-right:0px;
}
th a {
display: block;
position: relative;
}
th a:link, th a:visited, th a:active, th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a, th.desc a {
margin-right: .75em;
}
th.asc a:after, th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
To address your questions:
How do I create a new table class that inherits from the base table?
If you do not have a css file that resets all style rules every element inherits from the browser default file. If you define style-rules for the table element table {....} and create another style rule .foo {} the css-rules for table.foo are composed by the default style, the defined style for the element and the specific style. You can test this out with the chrome developer tools and inspect element.
Should I put new classes in a separate CSS file?
No, unless you have a very good reason. Just to clarify - rule of thumb put all style rules in one file. But not each rule in a new seperate file.
How do I create a td element under that new table and cause it to inherit from the base td of the base table?
See above td {background-color: red} td.bgBlue {background-color: blue} and the html <td class="bgBLue"> But there are other ways. I would recommend you read a tutorial about the basic rules of css and inheritance of style rules.
Update
I want to create a class for a table that ... with special markup for td elements with strikethrough, and some td elements bolded. For strikethrough (css 2.1 or css 3) you can use text-decoration which seems to be not supported very well. Although it may be that the browser compability table is outdated because it worked in both browser i tested (IE11 and chrome31).
.isBold { font-weight: bold;}
.isStrikethrough {text-decoration:line-through; }
and the html
<table>
<tr><td class="isBold">bold</td></tr>
<tr><td class="isStrikethrough">one</td></tr>
</table>
There may be hacks for older browsers by using for example <del>your text</del> and overlaying a transparent image.
My css is located at http://sillybean.net/css/seaglass.css and i want to use this css for only one of html table, On the same page i have multiple html tables so i do not want to affect other html tables. What is the fastest way to do it with less modification on http://sillybean.net/css/seaglass.css ?
Can you just apply a class to the table you want to affect, then use that class in your CSS?
In your HTML, you can put:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
And then, add the class selector to your CSS:
table.mytable { border-collapse: collapse; border: 1px solid #839E99;
background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
Define an ID or CLASS in your CSS that will affect the table in question.
Then, in your HTML code, say
<table id="theid"... />
or
<table class="theclass" ... />
The CSS ID looks like
#theid
{
//attributes
}
Classes look like:
.theclass
{
//attributes
}
This is exactly what id and class attributes are for. If you can't change the markup (like styling myspace) then you need to use selectors to target the one table more precisely. The choice of selectors is something you'll need to decide yourself.
For Multiple Table and Classes
HTML Table
<table id="tableId1">
--Table Content--
</table>
<table id="tableId2">
--Table Content--
</table>
<table class="tableClass1">
--Table Content--
</table>
<table class="tableClass2">
--Table Content--
</table>
CSS Script
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
Here are class selectors and markup that will style the first table but not the second:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
Or you can use an ID selector in a similar fashion:
<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>
Sometimes a religious war breaks out about which of these two approaches to use. Either is fine for your needs. According to the spec, you can only put a given ID on at most one element in your HTML (but most browsers allow you to break that rule).
Apply the Class name to the table on which you want to apply css rest is fine...
While you should add a class to the table you want to affect, let's assume you can only modify the css. In that case you can get pretty fancy with selectors. But not all the browsers support them. You can see that the CSS 2 selectors don't support the n-th child concept. Otherwise, if you had html like:
<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>
You could target the first with CSS2 selectors, but the second and third can only be targeted with CSS3 ones.
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
Select table by class for styling a desired table e.g if you have table:
<table class="tableOne"></table>
<table class="tableTwo"></table>
Then in CSS, you will use something like this:
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}