Multiple CSS class, with a element - html

I have links in a table.
like:
<table>
<tr>
<td></td>
<td></td>
<td><a href="lalala"</a></td>
<td></td>
</tr>
</table>
I want to use mutliple classes:
<td class="XYtableItem itemID"><a href="lalala" /></td>
The problem is:
I cant reach the a elements in CSS
I tried these:
.XYtableItem a {}
a.XYtableItem {}
XYtableItem > a {}
none of these works.
I dont rly know this should work or not.
+I cant put classes to the a elements, but doesnt matter, not working eiter.

They should work, out of curiosity what CSS rules are you trying to apply to the link ? Bare in mind that there may be some other rules in the CSS overriding your ones, giving you the impression you're not targeting the link correctly.
.XYtableItem a
This one should be good

The first rule should match as that selects any a element that is the descendant of an element with the XYtableItem class.
The second rule will any a with the class XYtableItem and the third any a element that is a descendant of a XTtableItem element - possibly just missing the class selector (.).
Try adding content to your a tag as it shouldn't be self closing.
Example at http://jsfiddle.net/mfhHG/

As other answers suggest, most probably your style might be overriding by something else.. You firebug to inspect the element and trace the style.. it should show you what exactly is being overridden by which style..

There are some problems with your HTML,
<table>
<tr>
<td>Link</td>
<td>Link2</td>
<td>Link3</td>
<td>Link4</td>
</tr>
</table>
And the selectors should be very simple.
Check this example.

<style>
td.aaa a {
color: green;
}
td.bbb a {
color: yellow;
}
</style>
<table>
<tr>
<td class="XYtableItem aaa">aa</td>
<td class="XYtableItem bbb">bb</td>
</tr>
</table>
The above works for me.
(Although I have had some problems with some styles like padding etc when using on a tags on IE)

Related

Styling a table in html/css

What do you think is the most logical and efficient way to style a table in HTML/CSS?
I've seen a lot of people using HTML properties in their code like
<table width="80%" cellspacing="2" border="0">
<tr>
<td align="right" nowrap="nowrap">
</td>
</tr>
</table>
Wouldn't it be easier to give tables and tds classes/ids and format them in an external stylesheet?
Not only would it be better, it's the proper way to do this. The code you have now is not something you'd want on a production site.
You shouldnt use inline styles: quite good thread (What's so bad about in-line CSS?)
and if you dont like writing class for each, try :nth-child for styling (super useful): http://www.w3schools.com/cssref/sel_nth-child.asp
Yes, It would.
However, when HTML was first being built, CSS was not as handy as it is now. With the abilities of CSS today, I would recommend creating the initial layout with HTML tags, and leaving any styling attributes (i.e. align, text wrap, border, etc.) to a CSS stylesheet.
Good Question!
there are lot of ways by using those you can style your table.
inline Css
internal CSs
External Css(Mostly prefered)
SASS(use Mixin)
LESS
Compass
The best and easy way to style a table is using CSS. You can see the example code below;
Code:
<style>
.my_table{
border:2px solid blue;
width:50%;
padding:5px;
}
</style>
<table border="1" class="my_table">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>

Wrapper for multiple <tbody>?

For specific css requirements I'm using multiple <tbody> tags in my table design which looks something like this:
Use of multiple tbody tags
But I also require a wrapper for multiple tbody tags (something like a common tbody parent) such that this wrapper can be scrolled in order achieve the following effect:
A common tbody which can be scrolled
How do I achieve the latter srolling effect in the former one?
(P.S.: I know this can be done through nested table approach, but I'm looking for other alternatives if any)
As mentioned in the comments by FelipeAls and others that a <tbody> tag can be wrapped only by a <table> tag, I tried wrapping <thead> and <tbody>s in separate tables to create the desired effect in the following way:
<table>
<thead>
...
</thead>
</table>
<table>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
</table>
This solved the issue.
Here's a Working Demo.
You cannot have a wrapper for tbody elements inside a table. The tbody element itself is a wrapper for tr elements. HTML syntax does not allow any other container for tbody but table. What matters more is that this syntax rules is actually enforced by the way browsers parse HTML.
If you try to use, say, a div element as a wrapper (the most reasonable approach), it will actually create a div element in the DOM, but an empty one, and before the table. All the tbody and tr elements are inserted into the table element; they are effectively extracted from the div element, which thus becomes empty, unless it contains something else than table-related elements.
An illustration, using intentionally invalid markup:
<style>
.x { outline: solid red }
</style>
<table>
<tbody>
<tr><td>foo
</tbody>
<div class=x>
FOO!
<tbody>
<tr><td>foo2
</tbody>
<tbody>
<tr><td>foo3
</tbody>
</div>
<tbody>
<tr><td>The end
</tbody>
</table>
The conclusion is that you need a different approach. The most obvious one is to use just a single tbody element. If this is not feasible, you should explain why, but this would be a topic for a new question.

CSS: Is it possible for a td to infer style from its header or vice versa?

I am formatting my tables, and some of them have hyperlinks in the right hand column which I want right aligned. Is there a way from css to infer that the column has links in it, and right align the whole column, including the header?
Alternatively, is there a way to apply a class to just the header and have it affect the alignment of all of the columns underneath it?
I recognize that I can apply a style to the individual th and td elements, but I was hoping for something a little more elegant.
EDIT: There is only one table.
<table>
<thead>
<tr>
<th>Some Column</th>
<th>actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some data</td>
<td>Edit</td>
</tr>
</tbody>
<table>
I am asking if I can apply a style to the element for the actions and write CSS which will cause all of the elements in that column be style a particular way.
This functionality is not part of CSS. Shaun Inman suggested something like a parent selector that would allow parents to inherit from their children, but there are tons of issues with this methodology.
I would suggest, instead, that you try a javascript solution. You could search the table to see if it contains links, then add a class to the table in the case that they do. Something like this:
HTML
<table>
<thead>
<tr>
<th>Normal</th>
<th>Align Me</th>
<th>Normal</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
jQuery
$('td > a').each(function(){
var $td = $(this).parent();
$td.addClass('align-right');
var $th = $td.closest('table').find('th').eq($td.index()).addClass('align-right');
});
Here is a fiddle for you to check out.
CSS can only be applied to child or siblling elements. Children cannot tell their parents what to do.
Applying a class to the TD is the right thing to do.
What you want can not be done with CSS.
But in your special case, you can refer to the fact, that the column with the links is the last one in each row.
There is a special "pseudo-class" in CSS for this: last-child.
th:last-child { ... }
td:last-child { ... }
I came up with a solution, but it only works when the actions are the last column in the table.
<table class="hasActions">
...
</table>
And CSS:
table.hasActions td:last-of-type, table.hasActions th:last-of-type {
text-align: right;
}
Since this doens't work for arbitrary columns, I'll leave the question open for now.

Content aware CSS - apply style only if content is available

Is it possible to have a css style be aware of whether the element it is being applied to has some sort of content or not? I am currently using tables (forced to since the end user uses cms to create pages) with a css for each cell, as so
<table>
<tr>
<td class="someClass">Test value 1</td>
<td class="someClass">Test value 2</td>
</tr>
<tr>
<td class="someClass">Test value 3</td>
<td class="someClass"></td>
</tr>
</table>
As displayed, there is the chance that a table cell is left empty. Is there a way to make "someClass" aware of this and not apply the style to this cell?
I am sure there is some js hack I could apply, but I wonder if it is possible with pure css. Long shot?
Thanks.
Simply use the :empty pseudo-class like so:
td.someClass:not(:empty) {
/* Styles */
}
As Petr Marek mentions it's not very reliable as a cross-browser solution, so if you must support older browsers (IE8 and older) you will need JS (which you can probably figure out yourself). Otherwise, the above CSS rule will work just fine.
You can find the browser compatibility of :not() and :empty here
The only thing I can think of that relates to your question is psuedo-classes, such as empty.
Here is an example:
<html>
<head>
<title>Example</title>
<style type="text/css">
.cell:not(:empty) {
background-color: red;
}
.cell:empty {
background-color: blue;
}
</style>
</head>
<body>
<table><tBody>
<tr><td class="cell"></td><td class="cell">Not empty</td></tr>
<tr><td class="cell">Not empty</td><td class="cell"></td></tr>
</tBody></table>
</body>
</html>
In modern browsers, you will see that empty cells are blue and cells with content are red.
The key here is the first line of CSS, .cell:not(:empty). This applies the CSS if the element does not have the psuedo-class :empty applied.
No, with pure cross-browser css it is not. You will have to edit their cms or use javascript.

Is there a tag in XHTML that you can put anywhere in the body - even inside TABLE elements?

I would like to be able to place an empty tag anywhere in my document as a marker that can be addressed by jQuery. However, it is important that the XHTML still validates.
To give you a bit of background as to what I'm doing: I've compared the current and previous versions of a particular document and I'm placing markers in the html where the differences are. I'm then intending to use jQuery to highlight the parent block-level elements when highlightchanges=true is in the URL's query string.
At the moment I'm using <span> tags but it occurred to me that this sort of thing wouldn't validate:
<table>
<tr>
<td>Old row</td>
</tr>
<span class="diff"></span><tr>
<td>Just added</td>
</tr>
</table>
So is there a tag I can use anywhere? Meta tag maybe?
Thanks for your help!
Iain
Edit: On the advice of codeka, I may look for a better difference engine and I may have found one that is attuned to finding differences in XHTML: http://www.rohland.co.za/index.php/2009/10/31/csharp-html-diff-algorithm/
You can use HTML comments and this plugin (or this one).
Can you not just modify the class of elements that have changed?
<p class="diff other-class">Something changed</p>
<table>
<tr>
<td>Old row</td>
</tr>
<tr class="diff">
<td>Just added</td>
</tr>
</table>