Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apply CSS to data within TD but not to the TD. Need to up baseline of text in every TD. Maby text-atribute selector

I need to up text but if i apply class to TD or TR in IE, Opera and Chrome all cell goes up (background and border and text in cell). Please look example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <style>
  .myClass  td{
      position:relative;
      top:-8px;
      color:blue;
      }

  .myClass {
      position:relative;
      top:-8px;
      color:blue;
      } 
td { border: red solid 2px ;}   
  </style>
  </head>
<body>
<p>&nbsp;</p>
<table  width="384" height="89" border="2" cellpadding="0" cellspacing="3" bgcolor="#cccccc">
    <tr >
      <td width="109" bgcolor="#FFCC00">&nbsp;</td>
      <td width="255" bgcolor="#00CCFF" class="myClass">this TD have class=&quot;.myClass&quot;</td>
</tr>
<tr  class="myClass">
      <td bgcolor="#999999">&nbsp;</td>
      <td bgcolor="#FFFF00">this TR have class=&quot;.myClass&quot;</td>
    </tr>
    <tr>
      <td bgcolor="#666666">&nbsp;</td>
      <td bgcolor="#FFFFFF"><span class="myClass">this text within span-tags (.myClass)</span></td>
    </tr>
</table>
</body>
</html>

Firefox don`t affect if is applied to tr_or_td, affect only to text with span-tag.

Every browsers work correct if in every TD of a row place text within

<span class="tdclass"> mytext in span-tag </span>

QUESTIONS) :

  1. Is there some css structure to assign style only to data within TD but not to this TD

    tr.myclass TD {} 
    

in IE, Opera, Chrome applies to all cell, in Firefox don`t work at all.

  1. Is there some css selector of TEXT - I mean for example:

    .myclass > b
    

    will be applied when in tag with .myclass we have b-tag

    maby some word like EVERY_TEXT - may be such selector, for example:

    .myclass > EVERY_TEXT {}
    
  2. can anybody suggest another workable way to up text in all cells of table without span in every cell, and without .js

Thanks for helping!

like image 303
user1366742 Avatar asked Nov 14 '22 06:11

user1366742


1 Answers

Use an asterisk to select all elements in that section of the DOM, e.g.

​<div ​​​​class="one">
    testing <br/>
    <span> Test </div>
</div>​​​​​​​​​​​​​​​​​​


.one * {
    color: red;
}

Fiddle here, if you need to check it

like image 86
orourkek Avatar answered Dec 23 '22 06:12

orourkek