This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
While doing regular CSS, I found something wrong.
I have combination of :not(.class) selector and :first-child selector. Separately these two are working good. The red row should be red, but it isn't.
Here is snippet:
table tr td {
background: lightblue;
}
table tr.test td {
background: lightgreen;
}
table tr:not(.test):first-child td {
background: red;
}
<table>
<tr class="test">
<td>green</td>
</tr>
<tr class="test">
<td>green</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>blue</td>
</tr>
<tr>
<td>blue</td>
</tr>
</table>
I think, it should be like so: tr:not(.test) selects all <tr> elements which has no test class, then :first-child selects the first of those.
I don't want to use additional classes or change HTML.
Am I doing something wrong, or it's just some bug?
(I'm running Chrome 78.0.3904.87)
As per your code, you have written
table tr:not(.test):
Above line of code means you are fetching all the tr with no .test class.
table tr:not(.test):first-child td {
background: red;
}
And this code is matching the first child of the table. To understand it try changing the first-child to last-child. And you will see the changes.
I will recommend going through the docs of the selector on w3
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I have such issue, I have something like that:
<tr>
<td class="someclass">
<input />
</td>
...
<td> </td>
<td> </td>
..
</tr>
I want to override "someclass" css class that will be applied only to first <td> with <input>. How can I do it? Maybe with parent specification or something like that? Note: I can't add new classes
You can use css pseudo class first-child
Supported from IE7 +
.someclass{background:red;}
#table1 tr > td:first-child {background:blue;}
<table id="table1">
<tr>
<td class="someclass">One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
Please refer this link to know more about css selectors
Please try this:
table tr > td:first-child input{
property: value;
}
I'm attempting to style just the first two elements of this particular table:
<table class="myTable">
<tbody>
<tr>
<td>some stuff</td> <--- needs style
<td>some stuff</td> <--- needs style
<td>some stuff</td>
<td>some stuff</td>
<td>some stuff</td>
</tr>
</tbody>
</table>
Multiple tables exist on my HTML page so I don't believe I want to use first-child or nth-child selectors. What is the best way to go about this? Thanks in advance.
Actually, if that class is unique to the table in question, nth-child is the way to go:
.myTable tr:first-child td:nth-child(1),
.myTable tr:first-child td:nth-child(2) {
background-color: red;
}
...assuming you only want to style the first two columns in the table's first row. Otherwise, for all rows:
.myTable td:nth-child(1),
.myTable td:nth-child(2) {
background-color: red;
}
Example: http://codepen.io/paulroub/pen/eogcb
You can easily use nth-child selectors for a specific class or even ID which is more strict. What makes you think that you can't use them in this case?
Put an Id on the table and then access selectors via id
OR
if that's not possible try this
$('.myTable td:lt(3)').addClass('yourClass');
PS:Please remember that n-the child is 1 based and not 0 based indexing.
My HTML code
<div id="myelement">
<table class="myclass">
<tbody>
<tr>
<td>something</td>
<td>
<table>
<tbody>
<tr> hari </tr>
</tbody>
</table>
</td>
</tr>
<tr>
foo
</tr>
</tbody>
</table>
</div>
Xpath solution
"//tbody[1]"
Problem
I am looking for a CSS expression which should select first tbody which is a direct child of table, not the one inside tr.
If I use the CSS as tbody, then it would select 2, but I am looking for a way to fix it here. I know table>tbody will work, I am looking for if any more is there or not. As in my case I can't use table>tbody.
tbody tr td:first-of-type {
color: red;
}
DEMO
td:first-of-type will works too.
:nth-of-type(1) and :first-of-type are the same. Docs
Try using the immediate child selector >:
.myclass > tbody
Or if you just want the first one inside that div, you can do:
#myelement:first-child tbody
Use the direct child selector >. It will only select elements that are a direct descendant of another element
.myClass > tbody
Make sure to specify the class of the table so that you don't select the table further down in the DOM
This selector below will select the first tbody inside the table with class myclass, and not the one inside the descendant tr.
table.myclass > tbody
Common
table tr td
{
vertical-align:middle;
}
Custom
table.custom tr td
{
vertical-align:top;
}
When I use like this:
<table class="custom">
<tr>
<td>
<table>
<tr>
<td>this text align top, but I want to align middle
</td>
</tr>
</table>
</td>
</tr>
</table>
sub table behave like its parent. How can ignore parent element style?
One thing that you can do is adding the child selectors like so:
table.custom > tr > td { }
Then only the immediate children will match the style
You can use the > indicator to only target direct child elements
table.custom > tr > td
{
vertical-align:top;
}
However it should be noted that using a table within a table is generally not a good idea.
Note 2: this will not work in IE6.
table.custom tr td will select children at any level. The following DOM chains will all match
table.custom->tr->td
table.custom->tr->foo->td
table.custom->foo->tr->bar->td
Take a look at the CSS child selector >
http://www.w3schools.com/cssref/sel_element_gt.asp
http://css-tricks.com/child-and-sibling-selectors/
This question already has answers here:
how to make a whole row in a table clickable as a link?
(28 answers)
Closed 2 years ago.
I know it is possible to link an entire table cell with CSS.
.tableClass td a{
display: block;
}
Is there a way to apply a link to an entire table row?
I agree with Matti. Would be easy to do with some simple javascript. A quick jquery example would be something like this:
<tr>
<td>example</td>
<td>another cell</td>
<td>one more</td>
</tr>
and
$('tr').click( function() {
window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
then in your CSS
tr.hover {
cursor: pointer;
/* whatever other hover styles you want */
}
Use the ::before pseudo element. This way only you don't have to deal with Javascript or creating links for each cell. Using the following table structure
<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
all we have to do is create a block element spanning the entire width of the table using ::before on the desired link (.rowlink) in this case.
table {
position: relative;
}
.rowlink::before {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 1.5em; /* don't forget to set the height! */
}
demo
The ::before is highlighted in red in the demo so you can see what it's doing.
Unfortunately, no. Not with HTML and CSS. You need an a element to make a link, and you can't wrap an entire table row in one.
The closest you can get is linking every table cell. Personally I'd just link one cell and use JavaScript to make the rest clickable. It's good to have at least one cell that really looks like a link, underlined and all, for clarity anyways.
Here's a simple jQuery snippet to make all table rows with links clickable (it looks for the first link and "clicks" it)
$("table").on("click", "tr", function(e) {
if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
return;
location.href = $(this).find("a").attr("href");
});
Example: http://xxjjnn.com/linktablerow.html
Link entire row:
<table>
<tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
<td> ...content... </td>
<td> ...content... </td>
...
</tr>
</table>
Iff you'd like to do highlight on mouseover for the entire row, then:
<table class="nogap">
<tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
...
</tr>
</table>
with something like the following for css, which will remove the gap between the table cells and change the background on hover:
tr.lovelyrow{
background-color: hsl(0,0%,90%);
}
tr.lovelyrow:hover{
background-color: hsl(0,0%,40%);
cursor: pointer;
}
table.nogap{
border-collapse: collapse;
}
Iff you are using Rails 3.0.9 then you might find this example code useful:
Sea has many Fish, Fish has many Scales, here is snippet of app/view/fish/index.erb
<table>
<% #fishies.each do |fish| %>
<tr onclick="location.href='<%= sea_fish_scales_path(#sea, fish) %>'">
<td><%= fish.title %></td>
</tr>
<% end %>
</table>
with #fishies and #sea are defined in app/controllers/seas_controller.rb
Also it depends if you need to use a table element or not. You can imitate a table using CSS and make an A element the row
<div class="table" style="width:100%;">
<a href="#" class="tr">
<span class="td">
cell 1
</span>
<span class="td">
cell 2
</span>
</a>
</div>
css:
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
I feel like the simplest solution is sans javascript and simply putting the link in each cell (provided you don't have massive gullies between your cells or really think border lines). Have your css:
.tableClass td a{
display: block;
}
and then add a link per cell:
<table class="tableClass">
<tr>
<td>Link name</td>
<td>Link description</td>
<td>Link somthing else</td>
</tr>
</table>
boring but clean.
To link the entire row, you need to define onclick function on your row, which is <tr>element and define a mouse hover in the CSS for tr element to make the mouse pointer to a typical click-hand in web:
In table:
<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>
In related CSS:
tr:hover {
cursor: pointer;
}
I think this might be the simplest solution:
<tr onclick="location.href='http://www.mywebsite.com'" style="cursor: pointer">
<td>...</td>
<td>...</td>
</tr>
The cursor CSS property sets the type of cursor, if any, to show when
the mouse pointer is over an element.
The inline css defines that for that element the cursor will be formatted as a pointer, so you don't need the 'hover'.