CODEWITHSUNDEEP
htmlcss
Sharad
Sharad

Reputation: 743

How to apply css inside a text that is either any html control or without any html control

I have a table. some td has palin text and some td has text inside the div. 

<table class="k-selectable" role="grid" data-role="selectable">
    <tbody>
        <tr class="k-state-selected" role="row" aria-selected="true">
            <td class="center" role="gridcell">
            </td>
            <td class="center" role="gridcell">
                <div class="rc-sprite-td sprite-null">
                    &nbsp;</div>
            </td>
            <td role="gridcell">
                <div class="wb-ro-changed">
                    24261&nbsp;<span><img src="/RepairCenterWeb/Whiteboard/GetImage?IsOnHold=false&amp;IsVoid=false"></span></div>
            </td>
            <td role="gridcell">
                Issue 11
            </td>
            <td class="money" role="gridcell">
                <span class="float-left rc-sprite-td sprite-null">&nbsp;</span>$1,186.55
            </td>
            <td role="gridcell">
                <div class="wb-arrival-overdue">
                    10/9/2013</div>
            </td>
            <td role="gridcell">
                <div class="wb-delivery-overdue">
                    10/9/2013</div>
            </td>
            <td role="gridcell">
            </td>
            <td role="gridcell">
            </td>
            <td class="center" role="gridcell">
                <div class="rc-sprite-td sprite-null">
                    &nbsp;</div>
            </td>
            <td class="center" role="gridcell">
                <img src="/RepairCenterWeb/Whiteboard/GetImage?IsClosed=false&amp;HasPpi=false&amp;IsPpiVeto=false&amp;IsPartsDeleted=false&amp;HasPartsSupplement=false&amp;HasLaborSupplement=false">
            </td>
            <td class="center" role="gridcell">
                <img src="/RepairCenterWeb/Whiteboard/GetImage?HasSublet=false&amp;SubletStatus=0&amp;HasCriticalNote=false">
            </td>
            <td class="center" role="gridcell">
                <div class="rc-sprite-td sprite-null">
                    &nbsp;</div>
            </td>
            <td role="gridcell">
                <div class="center no">
                    No</div>
            </td>
            <td role="gridcell">
                <div class="center ">
                </div>
            </td>
            <td role="gridcell">
                <div class="center ">
                </div>
            </td>
            <td role="gridcell">
                <div class="center no">
                    No</div>
            </td>
            <td role="gridcell">
                <div class="center ">
                </div>
            </td>
            <td role="gridcell">
                s s
            </td>
        </tr>
    </tbody>
</table>

And CSS is 

.k-state-selected:hover {
  color: #ffffff;
  background-color: #0992eb;
  border-color: #0992eb;
}
.k-state-selected td div{color: #ffffff;}

When I select any row it shows the blue background and white text. My problem is it is working fine for plain text inside and inside div text. ANy one can add text inside the span,label etc. So in this case i have to add following

 .k-state-selected td label{color: #ffffff;}
 .k-state-selected td span{color: #ffffff;}

Is there any way that can apply css for test inside the html control inside a td.

Upvotes: 0

Views: 613

Answers (1)

Aaron Digulla
Aaron Digulla

Reputation: 328614

You could use the "any element" selector *:

.k-state-selected td * {color: #ffffff;}

This will match only if the td has (at least) one element as child.

Upvotes: 2

Related Questions