Given two long and complex selectors such as
.question-number td:first-child > span[...]
.question-text td:first-child > span[...]
Is there a way to merge the two such that the long suffix does not need to be repeated? Something like (though this is not valid CSS)
(.question-number | .question-text) td:first-child > span[...]
In case you only have those two classes that contains the word question you can consider attribute selector like below:
[class*=question] td:first-child>span {
color: red;
}
<table>
<tr class="anoher-class">
<td><span>some text</span></td>
</tr>
<tr class="question-number">
<td><span>some text</span></td>
</tr>
<tr>
<td><span>some text</span></td>
</tr>
<tr class="question-text">
<td><span>some text</span></td>
</tr>
</table>
Related
In my CSS, I have an entry:
.isenabled {
font-weight:bold;
background-color:lightyellow
}
In the HTML, I have:
<table>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
This works as intended. What I'd like to do is:
<table>
<tr class="isenabled">
<td>This is enabled</td>
<td>So is this</td>
</tr>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
But this doesn't work as it stands (both the cells have the default background). What should I do instead?
[EDIT]
I've made the desired behaviour more explicit.
Use following style
tr.isenabled > td, td.isenabled {
font-weight: bold;
background-color: lightyellow
}
<table>
<tr class="isenabled">
<td>This is enabled</td>
<td>So is this</td>
</tr>
</table>
.isenabled is catching the element with class "isenabled".
that's why when you add class to 'td' it works.
<table>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
if you are adding class to 'tr' element the css properties will be applied to 'tr' but you want it to be applied on 'td'.
'>' is used for immediate child after the the selected element
so if you write "tr > td" as selected it will select all 'td' which are immediate child of any 'tr' in html document.
so you can do like this
tr.isenabled > td {
font-weight: bold;
background-color: lightyellow
}
it will select all 'td' which is immediate child of any element with class "isenabled".
Here is the more information about css selectors https://www.w3schools.com/cssref/css_selectors.asp.
This question already has answers here:
CSS3 selector :first-of-type with class name?
(10 answers)
Closed 5 years ago.
I have rows like this:
<tr class="team_2">Team Member</tr>
<tr class="team_2">Team Member</tr>
<tr class="team_1">Team Member</tr>
<tr class="team_2">Team Member</tr>
<tr class="team_1">Team Member</tr>
I want to highlight the first member of each team as team captain. I tried this:
table tbody tr.team_2:first-of-type, table tbody tr.team_1:first-of-type {
background: red;
}
This highlighted the first row, but not the third row (captain for team 1). Is this type of selector possible?
You'd have to do it backwards, see this answer for more info. Basically set ALL of those classes to the highlight color, then you look further down the DOM and reset any subsequent, sibling classes to the default.
Also, you should put td elements in your table:
.team_2, .team_1 {
background-color: red;
}
.team_1 ~ .team_1 {
background-color: transparent;
}
.team_2 ~ .team_2 {
background-color: transparent;
}
<table>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_1"><td>Team Member</td></tr>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_1"><td>Team Member</td></tr>
</table>
Ideally you would just add a class to the team member and target that specific class.
HTML
<tr class="team_2">
<td class="captain">Team Member</td>
</tr>
<tr class="team_1">
<td>Team Member</td>
</tr>
<tr class="team_1">
<td class="captain">Team Member</td>
</tr>
<tr class="team_2">
<td>Team Member</td>
</tr>
CSS
.captain{.....}
EDIT: I have edited my answer as the one Ben gave is better aligned to your question.
I'm trying to "zebra" color my table rows (odd = dark, even = light). However, because of my application, where the user is able to hide rows using selectors, it won't have the zebra effect because of the pseudo selectors selecting everything, and not based on what's "visible".
This is nothing new, and it's been discussed many times before:
Select odd even child excluding the hidden child
Zebra striping a table with hidden rows using CSS3?
In the same table, I'm using CSS's "count" feature, to visibly display row numbers for each row, and THESE are only applied on visible rows (discards rows with display:none)
table {
width: 100%;
background: white;
counter-reset: rowNumber;
}
tr > td {counter-increment: rowNumber;}
tr td::before {
content: counter(rowNumber);
color: blue;
}
tr:nth-child(even) {
background: red;
}
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr style="display:none;">
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr style="display:none;">
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
https://jsfiddle.net/cr6yo00w/1/
My question is (haven't seen this asked anywhere):
Is there a way to combine the two and zebra-color my table this way? Is it possible to extract the even/odd from the count?
EDIT: This was flagged as dupe -- As I've already stated myself, the odd/even selector has been discussed before. My question specifically relates to a possible way of combining odd/even selector WITH the CSS rowNumber count.
I'd like to select all of the child td elements of the second child of a tbody element. Here is the selection I am trying to achieve:
<table>
<thead></thead>
<tbody>
<tr></tr>
<tr>
<td>I want to select this td</td>
<td>And this one</td>
</tr>
</tbody>
</table>
tbody:nth-child(2) > td
{
//insert rules
}
However this is not working. Does CSS3 support selecting children of pseudoclasses? If not, any advice on how to achieve the above selection would be greatly appreciated.
Thanks for you input.
tr:nth-child(2) does what you asked for:
tr:nth-child(2) {
color: red;
<table>
<thead></thead>
<tbody>
<tr>
<td>not me</td>
<td>And not me</td>
</tr>
<tr>
<td>I want to select this td</td>
<td>And this one</td>
</tr>
</tbody>
</table>
tbody:nth-child(2) > td won't work because only <tr> elements can be children of <tbody> elements.
to select all second td try it:
td:nth-child(2)
{
//
}
but if you wan't to select all td in the second child you can try :
tr:nth-child(2)
{
//
}
Yes you can mix pseudo-selectors and the child selector (did you notice your typo on child?):
.a-class:nth-child(2n) > .child-class
suppose I have a nested tables in html like this
<table>
<tr>
<td><table>
<tr>
<td></td>
<td></td>
</tr>
</table></td>
<td></td>
</tr>
<tr>
<td><table>
<tr>
<td></td>
<td></td>
</tr>
</table></td>
<td></td>
</tr>
</table>
Now I want to do style only to the parent table without adding any markup like any class or IDs. so how can I do that only in css.I just want to select the parent table.
You can't specify the parent table in a selector, but you can specify the child tables, so you can style all tables, and then override the style for child tables:
table { background: red; }
table table { background: none; }
You could probably use table:first.
But it's advanced selector which I personally wouldn't trust that much in pure CSS. There is also a reason why there are classes and ids so why not use them?