I need to hide the first tr.snip row
Why this CSS doesnt work?
.table tr.snip:first-child {
display:none!important;
}
html
<table>
<tbody>
<tr>...</tr>
<tr class="snip">...</tr>
<tr class="snip">...</tr>
</tbody>
</table>
When you say .snip:first-child, you are looking for something that both has the snip class and is the first child of its parent. In your table, the first row with the snip class is the third child, so the selector doesn't work.
Directly selecting things the way you're trying to won't be possible until selectors level 4 comes out, so at the moment your best bet is to try to combine sibling selectors (+ and ~) with pseudo selectors. What exactly you do depends on how complicated your use case is.
The simplest solution for your example would be:
tr + tr.snip {
display: none;
}
If necessary, you could also try something like:
tr:not(.snip) + tr.snip {
display: none;
}
Or you could do it in reverse:
tr.snip {
display: none;
}
tr.snip + tr.snip {
display: table-cell;
}
Or (if this is more appropriate):
tr.snip {
display: none;
}
tr.snip ~ tr {
display: table-cell;
}
Because you are trying to select a tr.snip that is ALSO the first child of its parent. The tr.snip you are trying to hide is the second child of its parent, so it doesn't match the CSS selector.
Also, don't forget to put your content inside td, like this:
<tr class="snip"><td>...</td></tr>
Related
Lets say i have this structure :
<li>Something something <input type="checkbox"></li>
How could i apply a simple text-decoration: line-through; to li content when checkbox is checked ?
I tried this with no luck using the & sass selector :
li {
& input:checked {
text-decoration: line-through;
}
}
EDIT :
I appreciate all the answers,however i was looking to do this using sass,i thought the & parent selector has this functionality but after i researched a little bit,i found out its not meant to be used that way.
Nevertheless,i found a solution without tweaking my structure or add javascript,i found out that bootstrap does not constrain you to place the checkbox after the li content in order to show it in the far right position,you can place it before and it automatically sticks it to the right,so i did that and placed the li content inside a span,so i just selected input:checked + span which gave me the desired result.
You can't do it. A Element has only access to his child and siblings.
With the siblings there is a neat trick where you can achive a similar result.
At first you need to move your checkbox at the beginning (html) so you can style the next siblings with ~ selector.
Then you can apply some css rules to the parent to swap back to order.
div {
display: flex;
flex-flow: row-reverse;
}
div input[type="checkbox"]:checked ~ span {
text-decoration: underline;
}
<div>
<input type="checkbox">
<span>Hallo Text</span>
</div>
Sorry but you can´t, you need javascript or SassScript to do that, you can try this https://sass-lang.com/documentation/style-rules/parent-selector
You don't need Javascript for this, but you do need to be able to add something to your HTML.
You can do it if you are able to add an element - put the text into its own div and putting it after the input.
Then use CSS grid on the li element, changing the order that the input and the div are shown. This just changes the visual order so you can still use the + sign to indicate the element which is the immediately following sibling of the input.
li {
display: inline-grid;
grid-template-columns: auto auto;
}
li input:nth-child(1) {
order: 2;
}
li div:nth-child(2) {
order: 1;
}
input:checked+div {
text-decoration: line-through;
}
<ul>
<li><input id='input' type="checkbox">
<div>Something something</div>
</li>
</ul>
I have two table in two div, each div having a different class. I would like to apply a padding to the cells of one of the tables only.
(the code below is also at JSFiddle)
The HTML part:
<div class=tight>
<table>
<tr>
<td>hello</td><td>world</td>
</tr>
</table>
</div>
<div class=wide>
<table>
<tr>
<td>bonjour</td><td>tout le monde</td>
</tr>
</table>
</div>
The CSS part:
td {
background: green;
color: white;
padding: 10px;
}
This applies padding to all cells. I tried to be specific though various combinations of
td .wide { ... }
td, .wide { ... }
td.wide { ... }
but I failed to find the right one.
Is it possible to set a property for an element, but which is a child of a specific div (specific = having a specific class)?
For example, if you want to apply padding on < td > of the first div, use:
.tight td{
padding: 10px;
}
If you prefer to exclude one of the class, you can also use :
div:not(.tight) td {
padding: 10px;
}
Use some thing like this .wide td
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
Question
Is there a clean way to apply a style for all sibling elements between two HTML elements?
Background
I have a table with bootstrap's .table-striped class, however, I want an arbitrary number of rows to be striped together as a group. My solution was to create a custom element using
document.registerElement("seq-tr");
and extend the tr:nth-child(odd/even) to tr:nth-of-type(odd/even), as well as to ...tr:nth-of-type(odd/even) + seq-tr:
.table.table-striped {
> thead, tbody, tfoot {
> tr {
~ seq-tr > td {
border-top: none;
padding-top: 0;
white-space: nowrap;
}
&:nth-of-type(even) {
&, + seq-tr {
background-color: #table-bg;
}
}
&:nth-of-type(odd) {
&, + seq-tr {
&:extend(.table-striped > tbody > tr:nth-child(odd));
> td:extend(.table-striped > tbody > tr:nth-child(odd) > td) {
}
}
}
}
}
}
Aside: Originally I had tried using the ~ selector instead of +, but that applied both :nth-of-type(even) and :nth-of-type(odd) to every <seq-tr> after the second row and whichever was later in the compiled CSS file took precedent, rather than being smart about it and looking for whether the closest sibling <tr> was even or odd.
So the above code works for the first <seq-tr> element, but for the following <seq-tr>s, it does not.
Is there a clever way to make this work for any number of consecutive <seq-tr>s?
I could use a seq-tr.striped class, but I would rather not.
Edit
It just occurred to me I could simply use multiple <tbody> elements, and style the rows based on even/oddness of those, rather than the rows themselves.
Can we have multiple <tbody> in same <table>?
I'd still like the answer to my question for other purposes, but it's less pressing now.
I have a table, in tr I have 7 th in it. I want to set display: none for the third child of tr and just for that one!
How can I set this style?
Use :nth-child selector with constant expression as a param to hide both td and th in the third column:
td:nth-child(3), th:nth-child(3) {
display: none;
}
Demo.
If you are using JQuery, you can do something like this:
$('tr').find('td:eq(3)').hide();
Or, with css you can do:
tr > td:nth-child(3) {display: none;}
Use the nth-of-type CSS selector to just stylize just the third tr element of a table element td of ID #table, like so:
#table > tr:nth-of-type(3) {
display: none
}
<tr style="display:none;">