How to select first and last TD in a row?
You could use the :first-child and :last-child pseudo-selectors:
tr td:first-child,
tr td:last-child {
/* styles */
}
This should work in all major browsers, but IE7 has some problems when elements are added dynamically (and it won't work in IE6).
CSS style for first td in a tr
Your syntax was incorrect.
td { text-align: right }; /* This was being applied */
td:first-child { text-align: left }; /* This wasn't.. */
Should be:
td { text-align: right; }
td:first-child { text-align: left; }
Note the semi-colons - they shouldn't be outside of the brackets {}
Other than that, you were using :first-child properly.
jsFiddle demo
How to select the first and last occurring td in a tr ?
You can separate multiple CSS selectors with a comma:
td:first-child, td:last-child { background: red; }
By the way, check your markup as it looks invalid (input element inside tr is not allowed).
Select all except first and last td element in one selector
It is syntactically correct, as you can quickly check using the W3C CSS Validator. The validator is known to have errors, so in principle, you should check the rule against CSS specifications, especially Selectors Level 3. The result is still that yes, it is correct.
It also has the desired meaning, since this is how selectors combine. You can use :not(...) selectors to express a condition of type “not ... and not ...”.
This applies provided that all children of tr elements are td. If there are header cells, i.e. th elements as well, then the selector applies to those data cells (td elements) that are not the first data cell or the last data cell in a row with .red class.
How to select not first tr and not last td
Use the :not(), :first-child and :last-child.
#myTable tr:not(:first-child):hover td:not(:last-child) {
background: #dfdfdf;
}
Also see this example.
Selecting button in second last td of first tr in table - Using jQuery selector
You could use:
$('.jtable-data-row:first-child td:nth-last-of-type(2) button').css('background', 'red');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><div id="tabs-Risks" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="FourthTab" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block;"> <div id="RiskTableContainer" class="jTableContainer" style="width:100%;"> <div class="jtable-main-container"> <div class="jtable-busy-panel-background jtable-busy-panel-background-invisible" style="display: none; width: 1432px; height: 835px;"></div> <div class="jtable-busy-message" style="display: none;"></div> <div class="jtable-title"> <div class="jtable-title-text">Risks</div> </div> <table class="jtable"> <thead> <tr> <th class="jtable-column-header jtable-column-header-sortable jtable-column-header-sorted-asc" style="width: 3.91146589259797%;"> <div class="jtable-column-header-container"><span class="jtable-column-header-text">WBS</span>
</div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="display: table-cell; width: 6.25834542815675%;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Task Name</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.47169811320755%;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Risk Event</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.40493468795356%;"> <div class="jtable-column-header-container"><span class="jtable-column-header-text">Date of Concern</span>
</div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 8.88969521044993%;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.04499274310595%;"> <div class="jtable-column-header-container"><span class="jtable-column-header-text">Date Identified</span>
</div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.26705370101597%;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Days Open</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="display: none;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Date Closed</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="display: none;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Type</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="display: none;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Mitigation Cost</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.54281567489115%;"> <div class="jtable-column-header-container"><span class="jtable-column-header-text">Probability</span>
</div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.83599419448476%;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact Effect</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.83599419448476%;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Cost Impact</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.97822931785196%;"> <div class="jtable-column-header-container"><span class="jtable-column-header-text">Overall Impact</span>
</div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.90275761973875%;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Expected Cost</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 14.2235123367199%;"> <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact Discussion</span>
<div class="jtable-column-resize-handler"></div> </div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.12046444121916%;"> <div class="jtable-column-header-container"><span class="jtable-column-header-text">Priority Effect</span>
</div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.12046444121916%;"> <div class="jtable-column-header-container"><span class="jtable-column-header-text">Priority ($)</span>
</div> </th> <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.19158200290276%;"> <div class="jtable-column-header-container"><span class="jtable-column-header-text">Severe?</span>
</div> </th> <th class="jtable-command-column-header" style="width: 1%;"></th> <th class="jtable-command-column-header" style="width: 1%;"></th> </tr> </thead> <tbody> <tr class="jtable-data-row" data-record-key="267"> <td>1.0</td> <td>Obtain building permits</td> <td><a href="http://shhasan.ddns.net/risk/view/267">get building permit earlier</a>
</td> <td>2014-03-18</td> <td>start dry wall job earlier then expected</td> <td>2014-01-21</td> <td>269</td> <td style="display: none;">2014-10-17</td> <td style="display: none;">Opportunity</td> <td style="display: none;"></td> <td>0%</td> <td>70</td> <td>$3000</td> <td>0</td> <td>$0</td> <td>This will only effect dry wallers</td> <td>10</td> <td>1</td> <td>No</td> <td class="jtable-command-column"> <button title="Edit Risk" class="jtable-command-button jtable-edit-command-button"><span>Edit Risk</span>
</button> </td> <td class="jtable-command-column"> <button title="Delete" class="jtable-command-button jtable-delete-command-button"><span>Delete</span>
</button> </td> </tr> <tr class="jtable-data-row jtable-row-even" data-record-key="650"> <td>14.3.1</td> <td>Plumbing</td> <td><a href="http://shhasan.ddns.net/risk/view/650">Leaks</a>
</td> <td>2014-10-05</td> <td></td> <td>2014-09-26</td> <td>26</td> <td style="display: none;">2014-10-22</td> <td style="display: none;">Threat</td> <td style="display: none;"></td> <td>0%</td> <td>0</td> <td>$1002</td> <td>0</td> <td>$0</td> <td></td> <td>10</td> <td>1</td> <td>No</td> <td class="jtable-command-column"> <button title="Edit Risk" class="jtable-command-button jtable-edit-command-button"><span>Edit Risk</span>
</button> </td> <td class="jtable-command-column"> <button title="Delete" class="jtable-command-button jtable-delete-command-button"><span>Delete</span>
</button> </td> </tr> </tbody> </table> </div>How can I select the last row of first table in the html code?
Is this you wanted?
table:nth-child(1) tr:last-child td {
background-color: green;
}
Or:
table:first-child tr:last-child td {
background-color: green;
}
CSS: How to select first td element in each row?
Something like this:
#fromAddress > table > tbody > tr > td:first-child {
font-weight: bold;
}
https://jsfiddle.net/j2mb4f0g/
Chrome at least will add in the tbody tag, so you should probably add it to your html to ensure this works in all browsers.
Or to avoid all the '>'s you could do:
td:first-child {
font-weight: bold;
}
table table td:first-child {
font-weight: normal;
}
https://jsfiddle.net/80v98xuf/
Related Topics
CSS - Font Being Blocked from Cross-Origin Resource Sharing Policy
CSS Min-Height Not Working on Mozilla Firefox
Is Vertical Text-Overflow Possible with CSS3
How to Style Disabled Textarea in IE8
Delay Mouseout/Hover with CSS3 Transitions
What Is the Most Practical Way to Check for "@Supports" Support Using Only CSS
Css3 Transitions on Pseudo-Elements (:After, :Before) Not Working
Flexbox VS Tables, Why Do We Need Flexbox
Combining Border-Top,Border-Right,Border-Left,Border-Bottom in CSS
How to Override Stylesheets of Primefaces
Is a CSS Property Starting with a Hash (#) Valid
Where Do the Lost Pixels Go in a Percent CSS Layout
Css: How to Change Colour of Active Navigation Page Menu
Font Awesome Fonts Show Up as Boxes on IE8
What's the Difference Between Visibility: Hidden and Visibility: Collapse in Flexbox
Why Does Display: -Ms-Flex; -Ms-Justify-Content: Center; Not Work in Ie10