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;
}
Related
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
This question already has answers here:
How to apply CSS to td of particular table?
(4 answers)
Closed 7 years ago.
How to apply CSS to td of particular table using Classname? (Not ID or Name)
Following is HTML
<table class="pure-table ToBeApplied">
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
<table class="pure-table NotToBeApplied>
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
I want to apply CSS say
td {padding-top:0; padding-bottom:0;}
i want to apply it on td's of table having Classname''ToBeApplied''.
I do not want to write a class and write same on each td of table
I do not want it to apply on td's of second table have Classname''NotToBeApplied''
How to modify HTML and CSS to achieve above?
Try this
table.ToBeApplied tbody tr td{
padding-top:0; padding-bottom:0;
}
Use:
.ToBeApplied td {padding-top:0; padding-bottom:0;}
try this
table.pure-table.ToBeApplied td{
padding-top:0px;
padding-bottom:0px;
}
i want to apply it on td's of table having Classname''ToBeApplied''.
Use:
.ToBeApplied td { ... }
I do not want to write a class and write same on each td of table
You don't need to, the code above will apply to all cells in table.ToBeApplied
I do not want it to apply on td's of second table have Classname''NotToBeApplied''
It won't.
I have table with some rows.
I would like to create a CSS that allow me to change the color for the first TD element in a TR row recursively only for a table which has the class mytable.
Could you give me a sample of CSS?
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
For this you can use :first-child property. Write like this:
.mytable td:first-child{
color:red;
}
Use the CSS "first-child" element: http://www.w3schools.com/cssref/sel_firstchild.asp
So can do something like:
.mytable td:first-child {
something here
}
as #sandeep has written you can use first-child to achieve the goal. Better approach, if possible, is to add a class name to your first td. If this is supposed to be the header, you might also want to use th instead of td
Sandeep has the right idea, but you seem to be asking for a style rule that's slightly more specific. Try this:
table.mytable td:first-child {}
:first-child does not work in IE, a practical approach would be to change these td which you are gonna apply a background to th and then style them
You can try this:
HTML
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
CSS
.mytable tr td:first-child{
color:red;
}
http://jsfiddle.net/hrBAn/1/
This question already has answers here:
How to center the contents of an HTML table?
(9 answers)
Closed 1 year ago.
I have created a simple table and want to align the td elements in center but align:center in css doesn't seem to work
.cTable td{
align:center;
}
<table border='1' id='mytable' class="cTable">
<tbody>
<tr><th>Claim ID</th><th>Status</th></tr>
<tr><td align="center">22</td><td>333</td></tr>
<tr><td>22</td><td>333</td></tr>
<tr><td>22</td><td>333</td></tr>
</tbody>
</table>
It should be text-align, not align
https://developer.mozilla.org/en/CSS/text-align
What worked for me is the following (in view of the confusion in other answers):
<td style="text-align:center;">
<input type="radio" name="ageneral" value="male">
</td>
The proposed solution (text-align) works but must be used in a style attribute.
margin:auto; text-align, if this won't work - try adding display:block; and set there width:200px; (in case your TD is too small).
Give a style inside the <td> element or in your CSS file, like this: vertical-align: middle;
I personally didn't find any of these answers helpful. What worked in my case was giving the element float:none and position:relative. After that the element centered itself in the <td>.
The best way to center content in a table (for example <video> or <img>) is to do the following:
<table width="100%" border="0" cellspacing="0" cellpadding="100%">
<tr>
<td>Video Tag 1 Here</td>
<td>Video Tag 2 Here</td>
</tr>
</table>
I have the following CSS which isn't working for me.
table.fields tr > td:first-child { padding-right: 50px; }
The HTML is like the following:
<table class="fields">
<tbody>
<tr>
<td> text... </td>
<td> another td elem... </td>
</tr>
</tbody>
</table>
I want to apply the padding to the first <td> element but not the second.
This was posted before stevebot fixed the question. Leaving my post here for the sake of its comments.
Your table has no fields class. Change it to this and your CSS selector should pick it up.
<table class="fields">
As discussed in the comments of the first answer, my lucky guess ended up solving the problem:
Use: table.fields tr > tr instead of table.fields tr > td:first-child
P.S: As I said, it might have been worth trying, and it was! Lucky me haha!