I have the following CSS I need to apply to only a particular div (because of conflicts):
The div in question has the class name datepicker-days. Do I declare the below table as .datepicker-days.table? But then how do I declare the .table class below that?
CSS
table {
max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
margin-bottom: 18px;
}
.table th, .table td {
padding: 8px;
line-height: 18px;
text-align: left;
border-top: 1px solid #ddd;
}
HTML
<div class="datepicker-days" style="display: block; ">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev">
....
Sorry if this wasn't clear, the CSS rules are from Bootstrap. I'm just using a few of the rules because the datepicker plugin I am using depends on those particular rules. So where I have other instances of <tables> in my code, I don't want these rules to apply.
Just use the descendant selector:
.datepicker-days table {
/* this rule will only apply to `<table>` elements that are descendents of any element with class "datepicker-days" */
}
.datepicker-days { /* Targets the div */ }
.datepicker-days table { /* targets all tables nested in the div */ }
.datepicker-days > table { /*targets only tables that are direct children on the div */ }
You would do the following:
.datepicker-days table {
Styles here;
}
This looks for <table> with the .datepicker-days class only
If you only need to apply a specific style to one unique div, why not give it an id #
Related
How is "," a CSS combinator and can we use space instead for Descendant Selector?
html, body{
margin: 0;
padding: 0;
background-color: hsl(204, 43%, 93%);
font-family: Karla, sans-serif;
font-size: 1rem;
font-weight: 400;
width: 100%;
height: 100%;
}
In this case I would suggest you don't apply styling to the html selector since the <html> tag serves as a container for the entire page, its the root node.
On to your question: by comma separating selectors, you are telling CSS that you want the styling to apply to both selectors.
You can even chain ".class" selectors, "element.class" selectors, and pseudo-class selectors such as .button:hover (if you've added "class=button" to the <button> html tag's attributes).
Also, yes, in CSS you can chain multiple selectors with spaces if they are .class selectors.
Here is (probably a crummy) example:
The Html
<table class="table">
<tr class="row">
<th class="header"> Heading 1 </th>
<th class="header"> Heading 2 </th>
</tr>
<tr class="row">
<td class="cell">Cell 1</td>
<td class="cell">Cell 2</td>
</table>
The CSS
.table {
/* Styling for the table container */
}
.table .row {
/* Styling for rows */
}
.table .row .header {
/* Styling for column titles */
}
.table .row .cell {
/* Styling for table cells */
}
.table .row .cell:hover {
/* Styling for cells on hover (pseudo-class) */
}
You can also try (temporarily just to see if it works) to make it work without loading an external css file by just adding the element with the css code inside like so, make sure to place it AFTER the and BEFORE the ! AND as Mick said, probably leave the html targeting:
<style>
body {
margin: 0;
padding: 0;
background-color: hsl(204, 43%, 93%);
font-family: Karla, sans-serif;
font-size: 1rem;
font-weight: 400;
width: 100%;
height: 100%;
}
</style>
If that works then try to include the external 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*/
}