I have this html markup:
<div class="entry-content"><table>
<thead>
<tr>
<th></th>
<th><strong>32nd</strong> </th>
<th> <strong>Decimal</strong></th>
</tr>
...
How I can specify to apply a set of table style specifically to the table enclosed in a entry-content class width?
I have tried this in my .css like this:
#entry-content {
.table {
But it does not work.
EDIT
It has to be very specific to this structure. i.e. the css must apply to only
.entry-content table
not
.entry-content p table
Otherwise the css may stuff up layouts that also uses table
Use this CSS selector.
.entry-content table{
//styles here
}
If you want to apply styles to tr and th use this selector
.entry-content table tr{
//some styles
}
.entry-content table th{
//some styles
}
Edit
The above selector selects any table (not just immediate child) that is inside the .entry-content, even if the table is inside of another div, which is inside the .entry-content.
In order to select an immediate child/table of the .entry-content use this selector:
.entry-content > table{
//some style
}
Related
I need to hide the first tr.snip row
Why this CSS doesnt work?
.table tr.snip:first-child {
display:none!important;
}
html
<table>
<tbody>
<tr>...</tr>
<tr class="snip">...</tr>
<tr class="snip">...</tr>
</tbody>
</table>
When you say .snip:first-child, you are looking for something that both has the snip class and is the first child of its parent. In your table, the first row with the snip class is the third child, so the selector doesn't work.
Directly selecting things the way you're trying to won't be possible until selectors level 4 comes out, so at the moment your best bet is to try to combine sibling selectors (+ and ~) with pseudo selectors. What exactly you do depends on how complicated your use case is.
The simplest solution for your example would be:
tr + tr.snip {
display: none;
}
If necessary, you could also try something like:
tr:not(.snip) + tr.snip {
display: none;
}
Or you could do it in reverse:
tr.snip {
display: none;
}
tr.snip + tr.snip {
display: table-cell;
}
Or (if this is more appropriate):
tr.snip {
display: none;
}
tr.snip ~ tr {
display: table-cell;
}
Because you are trying to select a tr.snip that is ALSO the first child of its parent. The tr.snip you are trying to hide is the second child of its parent, so it doesn't match the CSS selector.
Also, don't forget to put your content inside td, like this:
<tr class="snip"><td>...</td></tr>
I have html like this below - and do not have access to modify it beyond setting a class or id on the first "td" in the row. Is there a way to target the entire row, or get both "td" elements in the row?
<tr>
<td width="50%" valign="top"><font class="subheader"><span class="eField">membershipCode</span> </font></td>
<td width="50%" valign="top"><font class="text">Testing </font></td>
</tr>
Part of this goes out in Email, so I'd rather avoid Javascript if possible. I tried this css, but no luck so far:
<style type="text/css">
td span.eField {
display:none;
}
td span.eField+td {
display:none;
}
</style>
Is there any way to do this using pure css?
NOTE: I only want to target rows containing the "eField" elements - I can hide the element itself, but can't get the next or the entire row. So I don't want to hide all rows in the table, just a select few.
Thanks,
-Jim
Yes indeed You can do it using normal css like the following fiddle demonstrates:
using the following two methods
table tr td
or
table tr
http://jsfiddle.net/qLynh5n1/
I do not quite understand what you're trying to do.
But can't you just use:
tr,
td {
css:css !important;
}
?
I understand you are try to select the parent of the span with class eField.
CSS has the descendant selector but not the other way around.
a > img { border: none; } - valid - all img directly under a
a < img { border: none; } - not valid - all a directly above img
Refer this link
Using css selector how am i supposed to write a selector so that only table rows that have data display cursor as pointer. I tried below but nope
table tbody tr:not(tr>th)
is this cross browser and works event in IE6?
That is not a valid CSS selector; you can't put combinators inside :not().
Your best bet is to put header rows (i.e. <tr> elements that contain <th> elements) inside a <thead>, leave the rest of the rows in your table's <tbody>, and simply use this:
table tbody tr {
cursor: pointer;
}
If you can't modify your HTML, it's not possible with CSS selectors alone, especially not with your requirement of supporting IE6. Use JavaScript instead; here's an obligatory jQuery example:
$('table tbody tr:not(:has(th))').css('cursor', 'pointer');
Assuming that your header row will always be the first row, you could do this:
table tr:not(:first-child) {
background:red;
}
This selects all tr elements except the first-child (as in, the first of the matched elements).
This does not work in IE6 or any other version of IE except IE9.
But yes, if you do require IE6 support, Javascript must be used.
you can do it using <thead> tag.
In my case table looks like:
<table>
<thead> <tr><th>... </thead>
<tbody> <tr><td>... </tbody>
</table>
this will be applied for all tables:
tbody tr{
background: yellow;
}
this is only for tables which has header:
thead+tbody tr{
background: red;
}
Basically I tried solutions above but in my case I wrote something different to make it works. I don't know if it's better to use :hover or not for cursor.
table tbody>tr:hover {
cursor: pointer;
}
In my case table is coded like that
<table>
<thead>
<tr>...</tr>
....
</thead>
<tbody>
<tr>...</tr>
...
</table>
At all, I wanted to add style to entire line and not tr themselves
I wonder what fits better into the CSS philosophy:
CSS classes mark entities
- OR -
CSS classes mark aspects
For example let's take the cell for a product price sheet and a footer cell which contains the sum of all prices.
In the first case each of the cells would only have one class: product-price resp. product-price-sum (or price and the row for example has a product class)
In other words: Classes identify things.
In case two the cells would have many classes, which define the properties/aspects of a product price, for example numeric and currency and an additional sum class for the footer. numeric would define the text to be right aligned, sum would mark the cell bold.
In other words: Classes describe things.
I can't decide which approach is better. In the past I used a mixture of both which quickly led to an ugly pile of unstructured CSS classes with conflicting styles and some ugly !important hacks.
The first approach obviously has some redundancy, because one would have many classes (product-*) and most of them would share common CSS properties.
The second one has problems when it comes to format just one place differently, let's say the product price sum. It can be possible that there are other places which also have the exact same three classes assigned, but don't have anything to do with a product price. In that case one would have to use the surrounding HTML tags to somehow "address" the specific place in the HTML file.
Are there any rules of thumb, guidelines, proven concepts, etc on how to handle this problem?
Just an observation... People tend to forget that CSS is hierarchical. Let me give you a very simple sample (please the tags are reduced to the minimum):
<table class="product">
<thead>
<tr><th>Name</th><th class="price">Price</th></tr>
</thead>
<tbody>
<tr><td>Product 1</td><td class="price">1</td></tr>
<tr><td>Product 2</td><td class="price">2</td></tr>
<tr><td>Product 3</td><td class="price">3</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td class="price">6</td></tr>
</tfoot>
</table>
you can compose class styles with tag style to pin where the style will be aplied:
table { /* styles for all tables */ }
.product { /* styles for the product table */ }
.product thead { /* styles for the all product table header row */ }
.product thead th{ /* styles for header row generic column */ }
.product thead .price { /* styles for header row price column */ }
.product tbody { /* styles for the all product table data row */ }
.product tbody td { /* styles for data row generic column */ }
.product tbody .price { /* styles for data row price column */ }
.product tfoot { /* styles for the all product table summarize row */ }
.product tfoot td { /* styles for summarize row generic column */ }
.product tfoot .price { /* styles summarize row price column */ }
Or you can use only simple table tags (no th, thead, tbody and tfoot tags) like this:
<table class="product">
<tr class="header"><td>Name</td><td class="price">Price</td></tr>
<tr class="data"><td>Product 1</td><td class="price">1</td></tr>
<tr class="data"><td>Product 2</td><td class="price">2</td></tr>
<tr class="data"><td>Product 3</td><td class="price">3</td></tr>
<tr class="footer"><td>Total</td><td class="price">6</td></tr>
</table>
And the CSS would be
.product { /* styles for the product table */ }
.product .header { /* styles for the all product table header row */ }
.product .header td{ /* styles for header row generic column */ }
.product .header .price { /* styles for header row price column */ }
.product .data { /* styles for the all product table data row */ }
.product .data td { /* styles for data row generic column */ }
.product .data .price { /* styles for data row price column */ }
.product .footer { /* styles for the all product table summarize row */ }
.product .footer td { /* styles for summarize row generic column */ }
.product .footer .price { /* styles summarize row price column */ }
This is not a final solution. Just a new approach to the problem.
Remember also that you can indicate some states or additional information to the CSS using custom attributes. See this sample:
<table class="product">
<tr class="header"><td>Name</td><td class="price">Price</td></tr>
<tr class="data"><td>Product 1</td><td class="price">1</td></tr>
<tr class="data" selected="selected"><td>Product 2</td><td class="price">2</td></tr>
<tr class="data"><td>Product 3</td><td class="price">3</td></tr>
<tr class="footer"><td>Total</td><td class="price">6</td></tr>
</table>
See that the "selected" attribute at the "tr" tag has no effect in the standard renderization of the table since it is not a recognized attribute of the tag, but it can be identified by the CSS (and also by the javascript which is not the case here). Like this:
.product tr[selected=selected] { /* styles for the selected row */ }
I would highly recommend tagging by entity (attribute, rather than individual element), so class='product price' (2 tags), rather than class='product-price'(1 tag). If you're careful, this will result in cleaner, easier to maintain code. If you're having trouble with !important's, try drawing a tree of how the tags will be structured. This will help decide at which level of the tree to declare certain properties, and result in minimal use of !important.
I don't think there's any right answer, but you want to favour the approach that results in the cleanest CSS and the least duplication overall. For me personally I'd say you want something in between your two options, but closer to option two.
If I'm understanding your descriptions correctly, with option one you'd have something like this:
<table>
<tr>
<td>Product A</td>
<td class="price">£1</td>
</tr>
<tr>
<td>Product B</td>
<td class="price">£2</td>
</tr>
<tr>
<td>Total</td>
<td class="price-sum">£3</td>
</tr>
</table>
and then the CSS:
.price {
text-align: right;
}
.price-sum {
text-align: right;
font-weight: bold;
}
and option two would be more like this:
<table>
<tr>
<td>Product A</td>
<td class="numeric currency">£1</td>
</tr>
<tr>
<td>Product B</td>
<td class="numeric currency">£2</td>
</tr>
<tr>
<td>Total</td>
<td class="numeric currency sum">£3</td>
</tr>
</table>
but why not have:
<table>
<tr>
<td>Product A</td>
<td class="price">£1</td>
</tr>
<tr>
<td>Product B</td>
<td class="price">£2</td>
</tr>
<tr>
<td>Total</td>
<td class="price sum">£3</td>
</tr>
</table>
and:
.price {
text-align: right;
}
.sum {
font-weight: bold;
}
There's no point giving a cell both 'numeric' and 'currency' if all currency fields will always have both classes - better to give currency the same styles as numeric in the stylesheet and then just use currency in the source:
.numeric, .currency {
// etc.
}
.currency {
// etc.
}
Using surrounding HTML tags for your exceptions is fine if you can do so in a semantic way. For example you might have some general styles on the currency class, but then a text-align: right on td.currency specifically.
The only other thing I'd say is that if you're having to use !important to override your own styles, you're doing something wrong!
The second one has problems when it comes to format just one place differently, let's say the product price sum. It can be possible that there are other places which also have the exact same three classes assigned, but don't have anything to do with a product price. In that case one would have to use the surrounding HTML tags to somehow "address" the specific place in the HTML file.
Isn't "addressing" like this the whole point of CSS rules and specificity? I think of it less as "addressing" and more like "namespacing" ;)
Personally, I prefer the second method; I tend to prefer using the id attribute to identify things ;)
... but the class attribute is nonetheless considered an element identifier.
In the end though, the purpose of the class attribute is used "for general purpose processing by user agents." I interpret this as meaning that the values you give it should cater to your application's needs.
So if your application needs to identify all the product prices - be it for CSS styling or for a jQuery script or a screen reader or whatever - identify them with a class attribute of product-prices.
If your application needs to describe all the numeric values - again, be it for CSS styling or for a jQuery script or a screen reader or whatever - identify them with a class attribute of numeric.
PS Please don't call it the CSS class; call it simply the "class attribute." Unless you're working in Asp.NET, there is no such thing as the CSS class, and even in Asp.NET - there shouldn't be a CSS class.
Sorry for multiple shameless links to my own web site.
I think its a bit of a personal approach.
I also like the hierarchi and use that alot.
But i use the entity variant most, but try to avoid as many markup as possible.
A rule i use is titles always go with h1 or h2. And you can style accordingly inside your entity.
So for example:
.product { }
.product h1 { }
.product span.price { }
.product span.discount { }
Same for lets say navigation:
ul.navigation { }
ul.navigation li { }
ul.navigation li.first { }
ul.navigation li.last { }
And with that said, i always would say, go for the option wich has the least amount of markup, without losing your overview. Clean code is nice.
I have a table in a div, with IDs of table1 and div1.
I want to set the CSS for the cells in the table.
What does the CSS block look like? Like this?:
div1.table1{
}
#table1 td {...}
The pound means that what follows is an id, in your case table1. the td that follows means that "any td that is a descendant of #table1". Here is a pretty good tutorial.
EDIT: for the most efficient selector use #table1 > tr > td {...}
If you're trying to be as specific as possible:
#div1 #table1 tr td {
}
If not, you could get away with
#table1 tr td {
}
or even
#table1 td {
}
The later two will style any element with the id of 'table1' (not just an element with the id of 'table1' inside of an element with the id of 'div1'
Assuming html:
<div id="div1">
<table id="table1">
...
</table>
</div>
Use CSS:
#div1 #table1 td {
...
}
That will let you style the cells.
#div1 #table1 td{ }
because
# = ID
. = class
nothing = tag
In my opinion better way to do it would be ...
#div1 table td{ }
<div id="div1"><table></table></div>
You don't really need to create a new id for the table. It kind of depends whether you have more than one table in your div and if the tables are going to be different, but from your question I'd say this would be better.
If the IDs are table1 and div1 then you use the # sign to indicate that an "element" is being used (#div1, #table1). if you have marked them as classes, then use a period (.div1, .table1). IDs should be used once per page, classes can be reused over and over. In this instance, all you may require is #table1 td { }
Any of these will work:
#table1 tr td{
}
#div1 #table1 tr td{
}
#table1 td{
}
#div1 tr td{
}
#div1 table td{
}
You use spaces to separate the tags.
or alternatively, if your table is generated by some server-side script, you can also add CSS classes explicitly to the table rows like
<table...>
<tbody>
<tr class="odd">
<td>..</td>
<td>..</td>
</tr>
<tr class="even">
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
It depends on how precise do you want to be. CSS stands for Cascading Style Sheets so this following rules will cascade down to the most specific one from top to border:
/* all td in the page */
td { color: '#aaaaaa' }
/* all td in table with id table1 */
#table1 td { color: '#bbbbbb' }
/* all td in a div that contains this table with this id */
div #table1 td { color: '#cccccc' }
/* all td in this specific div that contains this specific table */
#div1 #table1 td { color: '#dddddd' }
#div1 #table1 td
{
...
}
EDIT: Corrected - I read too fast - I usually use class instead of ID so I used . out of habit.