I have a <td> without a class inside of <tr class="alt">
How do I select that, but not all <td> inside of the table without modifying the HTML markup?
If I understand you correctly and you want to target all tds that don't have any class defined then you can do it like this
tr.alt td:not([class]) {
background-color:red;
...
}
See jsFiddle
If on other hand you need to target tds that don't have specific class (e.g. main) but may have other classes
tr.alt td:not(.main) {
background-color:red;
...
}
See jsFiddle
Use a class specifier on the tr:
tr.alt > td
If you only want to select the first td inside each tr.alt, you can use:
tr.alt > td:nth-child(1)
Related
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
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
}
Is it possible to apply style to all td's inside the table having specified ID?
Yes, via descendant selector
#table-id td { background:red }
HTML
<table id="table-id"><tr><td>Hi</td><td>, There</td></tr></table>
fiddle: http://jsfiddle.net/FjpBa/1/
Little trouble in using css, in the below code, i have used odd and even classes of css to change the background color. But whenever there is a backup(as highlighted) it should display the values as italics along with the odd and even properties. how to achieve this ?
<c:forEach items="${as.value.connections}" var="circuit" varStatus="elements">
<c:set var="stylesheetclass" value="primaryLine"/>
<c:set var="icon" value="/images/primary.png"/>
<c:if test="${circuit.backup}">
> <c:set var="stylesheetclass" value="backupLine"/>
>
>
> <c:set var="icon" value="/images/backup.png"/>
</c:if>
> <tr class="${elements.index % 2 == 0 ? 'odd' : 'even'}">
<td >
First of all if you make the functionality as if that a new class is added in the <tr> when backup value is present. For example if you add a class named backup then the <tr> would look like this <tr class="odd backup"> or <tr class="even backup">. After doing this functionality add the styles like below :-
tr.odd {
/* your styles already used*/
}
tr.even {
/* your styles already used*/
}
tr.backup {
font-style: italic; /* This would take effect for the <tr> which has backup class added */
}
Edit:
If you place the styles which you want to keep for the backup <tr>inside the .backup class your requirement would be achieved. And please keep the .backup class below the .even and .odd class. As styles written above gets overwritten with the below ones.
used this one !important
tr.odd{
background:red !important;
}
tr.even{
background:yellow !important;
}
Try doing it just with css selectors, you don't need to specify the classes in the DOM.
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
and then just add the class of backup when you want.
Just make sure you define the .backup class after the even and odd rules, so nothing becomes overwritten.
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