I'm trying to write a custom style for a website and am running into a bit of trouble. The following bit of code appears a lot, and I need to remove the float attribute of the span. There are other spans on the page inside <td> elements with floats that must stay untouched, and CSS doesn't have any parent selectors. I can't edit the html in anyway or add any Javascript. What can I do?
<table class="forum_post box vertical_margin" id="post00001">
<tbody>
<tr class="colhead-dark">
<td colspan="2">
<span style="float: left">
<a class="post_id" href="stuff.com">text</a>
</span>
</td>
</tbody>
</table>
.box > tbody > tr > td > span { float: none !important; }
This says:
Find all
spans that are the direct descendant (child) of a...
td which is a child of a...
tr which in turn is a child of...
tbody and finally it being the one and only child of...
table
OR maybe ...
span[style*="float"] { float: none !important; }
This says:
Any span with an attribute of style containing the word float.
rel *=[external]
Related
td span{color:red}
<td>
<span>hi</span>
</td>
I'm unable to target the span tag by mentioning td in CSS. Why it's happening? I can target the span tag by using span {color:red} or wrap the content inside a table with tr tag, but not by the above code
TD can be inside TABLE only. Than it'll work.
td span {color: red;}
<td><span>This one is outside TABLE, isn't red</span></td>
<table>
<tr>
<td><span>red</span>
</table>
td is only inside the table:
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
</body>
</html>
i want to apply css before p tag td. other td should be not effected
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>heading</td>
<td>some data</td>
<td><p class="may-class">Date</p></td>
</tr>
</table>
What it sounds like you are looking for is a parent selector, which CSS doesn't contain (yet...)
http://css-tricks.com/parent-selectors-in-css/
What I would do is apply a class to the td that you want to style. If you can't access the HTML than maybe you can style the p tag inside of the td with a direct child selector:
td > p { ... }
Refer to this question for ways to style it using Javascript:
Is there a CSS parent selector?
When the td with the p-class is always the only and last element of the tr you can use :last-child css styling.
Like:
tr td:last-child {
color:red;
}
EDIT:
It doesnt work with CSS. CSS cant get the parent of an element. Use jQuery/javascript instead:
jQuery('.may-class').parent().addClass('someClass');
Need some help with CSS styling CSS experts!
Using bootstrap in which
they have the following defined in bootstrap.css:
.table > tbody > tr.active > td{
background-color:#f5f5f5;}
I'm trying to highlight a row in a table when a user clicks it- easy enough,
my html structure follows exactly and I have the active class being inserted to the html when I click the row but it is just not highlighting and the style does not get applied...
<div class="container">
<div class="row">
<div ng-class=".....">
<div id="firstTable" class="group-table-split-body">
<table class="table-bordered table-condensed table-hover col-md-12">
<thead>
<tbody>
<tr ng-repeat="item in items"
ng-mouseenter="..."
ng-mouseleave="..."
ng-click="onRowClick(item)">
<td class="col-md-12">{{item.name}}.....
</td>
</tr>
</tbody>
</table>
.......................
however, if I try it with just a random test style class it works, like:
.anything
{background-color:#f5f5f5;}
so if I try .anything, it highlights....
I'm using Firefox...any ideas??
What you need to do is:
First make sure your own css file is loaded AFTER bootstrap.min.css
(this way your rules has higher priority)
After that you can easily override that bootstrap style by copying the exact same rule and changing its properties.
for example in your css add:
.table > tbody > tr.active > td{
background-color:red;}
and you will see difference. Another way to do this is by creating more specific rule that will override the bootstrap rule for example, I assume your base element here with class "table" is actually table so you could do this:
table.table > tbody > tr.active > td{
background-color:blue;}
Easiest and fastest solution to this problem is by overriding the property with important rule. But this is by far the worst solution and you should try to avoid important as long as possible (it will create problems later on).
However if nothing seems to work you can do it like this:
.active {
background-color: red !important;
}
You have forgotten class table from your table :)
.table > tbody > tr.active > td{
background-color:#f5f5f5;}
where is the class "table" ?
make it this
table > tbody > tr.active > td{
background-color:#f5f5f5;}
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/