My table has id="mytable"
. I'm trying to apply some CSS on the first and last <th>
only. I tried this but it doesn't work.
#mytable th:first,
#mytable th:last{
//css goes here
}
Using the following pseudo classes: :first-child means "select this element if it is the first child of its parent". :last-child means "select this element if it is the last child of its parent". Only element nodes (HTML tags) are affected, these pseudo-classes ignore text nodes.
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
You could also have table > thead > tr and then table > tbody > tr. So you might need to specify whether you want the first row from the thead or the tbody. find('tr:first') will select the tr in the thead. – Jeff S.
By using the :not(:first-child) selector, you remove that problem. You can use this selector on every HTML element. Another common use case is if you use an unordered list <ul> for your menu.
#mytable th:last-child, #mytable th:first-child {
//css goes here
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With