0

Tengo el siguiente codigo HTML:

<!DOCTYPE html><!-- no-cache -->
<html>

<head>
<title>Ficha de Inventarios</title>
</head>

<body><!--sii.load head -->
    <link href="/js/utils_jqu.css" rel="stylesheet">
    <link href="/js/metro/sinfonix.css" rel="stylesheet">

<style>
 .title {
  text-decoration: none;
  color:#fff;
  font-size:25px;
} 
</style>


<body onload="onLoad()" style="margin: 0; padding: 0;">

 <table border="0" cellpadding="0" cellspacing="3" width="100%">
  <tr>
   <td nowrap width="1"
    ><a href='javascript:writeDocument("Nuevo","OFF","");'
    ><img border="0" name="m11" src="/images/metro_file_new.png"     title="Nuevo Documento"   ></a></td>
   <td nowrap width="1"
    ><a href='javascript:writeDocument("Acepta","OFF","");'
    ><img border="0" name="m12" src="/images/metro_file_write.png"   title="Guardar Documento"  ></a></td>
    <td nowrap width="1"
    ><a href='javascript:writeDocument("Elimina","OFF","");'
    ><img border="0" name="m20" src="/images/metro_file_delete.png"  title="Eliminar Documento" ></a></td>
   <td nowrap width="1"
    ><a href='javascript:verifidForm("myForm.reset()");'
    ><img border="0" name="m14" src="/images/metro_file_undo.png"         title="Deshacer Cambios"  ></a></td>
    <td nowrap width="1"
    ><a href='javascript:writeDocument("Acepta","PRINT","");'
    ><img border="0" name="m13" src="/images/metro_file_print.png"   title="Imprimir (Ctrl+P)" ></a></td>
    <td nowrap width="1"
    ><a href='javascript:writeDocument("Acepta","ON","");'
    ><img border="0" name="m23" src="/images/metro_file_preview.png" title="Formato Imprimible"></a></td>
   <td nowrap align="right"><a class="title" href="javascript:CallSQL('^CIA.sql','list','','LoadCompany','key%20codigo%20nombre');">Compañia de Prueba, S.A.&nbsp;&nbsp; </a></td>
  </tr>
 </table>
<script>
function writeDocument(button, preview) {
 if (myForm) {
  switch (preview) {
    case "PRINT":
      if (myForm.preview) {
        if (window.submit) {
          window.submit(button, preview);
        }
      } else {
        window.print();
      }

    default:
      window.submit(button, preview);
  }
 } else {
  window.parent.location.reload(true);
 }
}
</script>

<div id="main" style="position: relative; visibility: hidden; width:100%">

 <form action="/cgi-bin/sinfonix.pl?AD-0354464104726F6F7403323535023937%20IN630.www" method="POST" enctype="multipart/form-data" name="myForm" target="connect9">
  <div align="center">
   <table class="Main">
    <tr>
     <td>
      <table class="Head" width="100%">
       <tr>
        <td valign="bottom">
         <table border="0" cellpadding="0" cellspacing="5">
					<tr>
						<td nowrap valign="top">Código de Producto<br>
						 <input size="20" maxlength="20" name="codigo" value="" onchange="javascript:CallSQLproducto('record');" class="search_IN630" 
						 > <a href="javascript:CallSQLproducto('list');"
						 ><img src="/images/search_list.png" title="Selecciona el Producto de una Lista" align="absmiddle" border="0"></a></td>
						<td>Línea de Ventas<br>
						 <select name="LineaVenta" size="1">
						 <option></option>
<option value="30303031">DUROTEST - ILUMINACION LARGA N</option>
<option value="39313030">CONSUMIBLES</option>
<option value="39393939">CONSUMIBLES SERVICIO TECNICO</option></select></td>
					</tr>
				</table></td>
				<td align="center"><span class="title">FICHA DE INVENTARIO</span><br>
				<a class="font-normal" href="javascript:CallSQL('^INV.sql','list','','LoadInvent','key%20codigo%20nombre');">
				(MERCANCIA PARA LA VENTA)</a></td>
			</tr>
		</table>
		<table class="Body" id="Body">
			<tr>
				<td valign="top"><span class="title">Datos Básicos</span>
				<table border="0" cellspacing="5">
					<tr>
						<td valign="top" nowrap align="center"
                        ><img id="foto"  src="/cgi-bin/sinfonix_image.pl?AD-0354464104726F6F7403323535023937%20^IMAGE.www%20647F616836273123212D3B317F3D2C25262C3E6E32362B2D6829263C2C223D22.jpg" align="absbottom" border="0" style="width:82 height:82" width="82" height="82" data-file="#file_image">&nbsp;</td>
						<td valign="top" nowrap align="center"
                        >
				<table border="0" cellspacing="5">
					<tr>
						<td>
						Descripción</td>
						<td style="width:330px">
								<input type="text" size="30" maxlength="30" name="Descripcion" value="" style="width: 100%"></td>
						<td style="width:50px">&nbsp;</td>
						<td>
						Existencia Mínima</td>
						<td>
								<input type="text" size="13" name="ExistMinima" value="" style="text-align: right; width: 240px" maxlength="9"> </td>
					</tr>
					<tr>
								<td>Descripcion 2</td>
								<td><input type="text" size="10" maxlength="10" name="refer_data_1" value="" style="width:100%"></td>
								<td>&nbsp;</td>
								<td>Existencia Máxima</td>
								<td>
								<input type="text" size="13" name="ExistMaxima" value="" style="text-align: right; width: 240px" maxlength="9"> </td>
					</tr>
					<tr>
								<td>No.de Parte</td>
								<td><input type="text" size="20" maxlength="20" name="refer_data_2" value="" style="width:100%"></td>
								<td>&nbsp;</td>
								<td>Cantidad a Pedir</td>
								<td>
								<input type="text" size="13" name="CantPedir" value="" style="text-align: right; width: 240px" maxlength="9"> </td>
					</tr>
					<tr>
								<td>Descripcion US</td>
								<td><input type="text" size="30" maxlength="30" name="refer_data_3" value="" style="width:100%"></td>
								<td>&nbsp;</td>
								<td>Catalogo y Pagina</td>
								<td>
								<input type="text" size="5" name="Catalogo" value="" style="text-align: right; width: 117px" maxlength="2">
								<input type="text" size="7" name="Pagina" value="" style="text-align: right; width: 116px" maxlength="4"> </td>
					</tr>
					<tr>
								<td>Descripcion US2</td>
								<td><input type="text" size="10" maxlength="10" name="refer_data_4" value="" style="width:100%"></td>
								<td>&nbsp;</td>
								<td>Referencia</td>
								<td><select name="refer_data_5" size="1" style="width:100%"><option></option>
<option value="31">TABLA 1</option>
<option value="32">TABLA 2</option></select></td>
					</tr>
				</table></td>
					</tr>
					</table></td>
			</tr>
			<tr>
				<td>
				<div id="tabs-content" class="tabs-resizer" style="padding:5px; width:989px; height:419px">
					<div id="tabs">
						<ul>
							<li><a href="#Precios">Listas de Precios y Unidades de Medidas</a></li>
<!--sii.if 1 -->
                  			<li><a href="#Proveedores">Modelos de los Proveedores</a></li>
<!--sii.fi -->
<!--sii.if 1 -->
                  			<li><a href="#Adicionales">Datos Adicionales</a></li>
<!--sii.fi -->
                		</ul>
						<div id="Precios" style="padding:0px" align="center">
							<table class="Body" width="100%" height="100%">
								<tr>
									<td valign="top"><span class="title">Listas de Precios</span><div align="center">
										<table border="0" cellspacing="0" cellpadding="0">
											<tr>
												<th class="LN" nowrap>Descripción</th>
<!--sii.for 5 -->
                        						<th class="LN" nowrap colspan="2">PRECIO 1</th>

<!--1   next -->
                        						<th class="LN" nowrap colspan="2">PRECIO 2</th>

<!--2   next -->
                        						<th class="LN" nowrap colspan="2">PRECIO 3</th>

<!--3   next -->
                        						<th class="LN" nowrap colspan="2">PRECIO 4</th>

<!--4   next -->
                        						<th class="LN" nowrap colspan="2">PRECIO 5</th>

<!--5   next -->
                      						</tr>
											<tr>
												<td nowrap align="right">Precio de Venta&nbsp;</td>
<!--sii.for 5 -->
                        						<td nowrap align="right" colspan="2">
												<input type="text" size="12" name="Pventa_Valor1" value="" maxlength="13"  style="text-align: right;width:95px"></td>
<!--1   next -->
                        						<td nowrap align="right" colspan="2">
												<input type="text" size="12" name="Pventa_Valor2" value="" maxlength="13"  style="text-align: right;width:95px"></td>
<!--2   next -->
                        						<td nowrap align="right" colspan="2">
												<input type="text" size="12" name="Pventa_Valor3" value="" maxlength="13"  style="text-align: right;width:95px"></td>
<!--3   next -->
                        						<td nowrap align="right" colspan="2">
												<input type="text" size="12" name="Pventa_Valor4" value="" maxlength="13"  style="text-align: right;width:95px"></td>
<!--4   next -->
                        						<td nowrap align="right" colspan="2">
												<input type="text" size="12" name="Pventa_Valor5" value="" maxlength="13"  style="text-align: right;width:95px"></td>
<!--5   next -->
                      						</tr>
											<tr>
												<td nowrap align="right">Comisión Base&nbsp;</td>
<!--sii.for 5 -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_CBF1"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_CBM1"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--1   next -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_CBF2"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_CBM2"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--2   next -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_CBF3"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_CBM3"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--3   next -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_CBF4"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_CBM4"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--4   next -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_CBF5"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato de la Comision B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_CBM5"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--5   next -->
                      						</tr>
											<tr>
												<td nowrap align="right">Dscto.Máximo&nbsp;</td>
<!--sii.for 5 -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_DMF1"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_DMM1"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--1   next -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_DMF2"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_DMM2"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--2   next -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_DMF3"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_DMM3"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--3   next -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_DMF4"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_DMM4"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--4   next -->
                        						<td nowrap align="left">
												<input type="text" size="1"  name="PVenta_DMF5"   value=""   maxlength="1"   style="text-align: right;width:10px" title="Formato del Descuento B=Bolivares, %=Porcentaje, T=Codigo de Tabla"></td>
												<td nowrap align="right">
												<input type="text" size="10" name="PVenta_DMM5"   value=""   maxlength="10"  style="text-align: right;width:81px" title="Valor Segun Formato"></td>
<!--5   next -->
                      						</tr>
										</table></div></td>
									<td valign="top"><div align="center"><span class="title">Unidad de Medida</span>
										<table border="0" cellspacing="0" cellpadding="0">
											<tr>
												<th class="LN" nowrap>Codigo</th>
												<th class="LN" nowrap>Base de Calculo</th>
											</tr>
<!--sii.for 3 -->
                        					<tr>
												<td align="center" nowrap>
												<select name="UND_codigo1" size="1">
												<option></option>
<option value="424C">BLOCK</option>
												</select></td>
												<td align="center" nowrap>
												<input type="text" size="13" name="UND_Base1" value="" style="text-align: right" maxlength="8" ></td>
											</tr>
<!--1   next -->
                        					<tr>
												<td align="center" nowrap>
												<select name="UND_codigo2" size="1">
												<option></option>
<option value="424C">BLOCK</option>
												</select></td>
												<td align="center" nowrap>
												<input type="text" size="13" name="UND_Base2" value="" style="text-align: right" maxlength="8" ></td>
											</tr>
<!--2   next -->
                        					<tr>
												<td align="center" nowrap>
												<select name="UND_codigo3" size="1">
												<option></option>
<option value="424C">BLOCK</option>
												</select></td>
												<td align="center" nowrap>
												<input type="text" size="13" name="UND_Base3" value="" style="text-align: right" maxlength="8" disabled></td>
											</tr>
<!--3   next -->
                      					</table></div></td>
								</tr>
							</table></div>
<!--sii.if 1 -->
              			<div id="Proveedores" style="padding:0px" align="center">
							<table class="Body" width="100%" height="100%">
								<tr>
									<td valign="top"><span class="title">Proveedores</span>
									<div align="center"><center>
										<table border="0" cellspacing="0" cellpadding="0">
											<tr>
												<th class="LN" nowrap>Código</th>
												<th class="LN" nowrap>Nombre o Razón Social del Proveedor</th>
												<th class="LN" nowrap>Modelo</th>
											</tr>
<!--sii.for 7 -->
											<tr>
												<td nowrap>
												<input type="text" size="10" name="PROV_Codigo1" value="" onchange="javascript:LINE='1';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
												<td nowrap>
												<input type="text" size="50" name="PROV_Nombre1" value="" disabled></td>
												<td nowrap>
												<input type="text" size="22" name="PROV_Modelo1" value="" maxlength="20"></td>
											</tr>
<!--1   next -->
											<tr>
												<td nowrap>
												<input type="text" size="10" name="PROV_Codigo2" value="" onchange="javascript:LINE='2';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
												<td nowrap>
												<input type="text" size="50" name="PROV_Nombre2" value="" disabled></td>
												<td nowrap>
												<input type="text" size="22" name="PROV_Modelo2" value="" maxlength="20"></td>
											</tr>
<!--2   next -->
											<tr>
												<td nowrap>
												<input type="text" size="10" name="PROV_Codigo3" value="" onchange="javascript:LINE='3';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
												<td nowrap>
												<input type="text" size="50" name="PROV_Nombre3" value="" disabled></td>
												<td nowrap>
												<input type="text" size="22" name="PROV_Modelo3" value="" maxlength="20"></td>
											</tr>
<!--3   next -->
											<tr>
												<td nowrap>
												<input type="text" size="10" name="PROV_Codigo4" value="" onchange="javascript:LINE='4';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
												<td nowrap>
												<input type="text" size="50" name="PROV_Nombre4" value="" disabled></td>
												<td nowrap>
												<input type="text" size="22" name="PROV_Modelo4" value="" maxlength="20"></td>
											</tr>
<!--4   next -->
											<tr>
												<td nowrap>
												<input type="text" size="10" name="PROV_Codigo5" value="" onchange="javascript:LINE='5';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
												<td nowrap>
												<input type="text" size="50" name="PROV_Nombre5" value="" disabled></td>
												<td nowrap>
												<input type="text" size="22" name="PROV_Modelo5" value="" maxlength="20"></td>
											</tr>
<!--5   next -->
											<tr>
												<td nowrap>
												<input type="text" size="10" name="PROV_Codigo6" value="" onchange="javascript:LINE='6';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
												<td nowrap>
												<input type="text" size="50" name="PROV_Nombre6" value="" disabled></td>
												<td nowrap>
												<input type="text" size="22" name="PROV_Modelo6" value="" maxlength="20"></td>
											</tr>
<!--6   next -->
											<tr>
												<td nowrap>
												<input type="text" size="10" name="PROV_Codigo7" value="" onchange="javascript:LINE='7';CallSQL('CP630.sql','Record',this.value,'LoadProv','codigo nombre');" maxlength="8"></td>
												<td nowrap>
												<input type="text" size="50" name="PROV_Nombre7" value="" disabled></td>
												<td nowrap>
												<input type="text" size="22" name="PROV_Modelo7" value="" maxlength="20"></td>
											</tr>
<!--7   next -->
                            			</table></center></div></td>
								</tr>
							</table></div>
<!--sii.fi -->
<!--sii.if 1 -->
              			<div id="Adicionales" style="padding:0px">
							<table class="Body" width="100%" height="100%">
								<tr>
									<td valign="top"><span class="title">Datos Adicionales</span>
									<div align="center"><center>
										<table border="0" cellspacing="5">
<!--sii.for 1 -->
                            				<tr>
												<td>Numero de Parte     </td>
												<td><input type="text" size="3" maxlength="1" name="ref_data_1" value="" ></td>
											</tr>
<!--1   next -->
                          				</table></center></div></td>
								</tr>
							</table></div>
<!--sii.fi -->
        		</td>
			</tr>
		</table>
      </td>
    </tr>
  </table>
</div>
<div style="display:none;">
  <input type="hidden" name="button" value="">
  <input type="hidden" name="config" value="00000009494E3633302E77777700000003000000">
  <input type="file" name="file_image"        id="file_image"        onchange="photoChange('#foto', event  );">
  <input type="text" name="file_image_delete" id="file_image_delete" onchange="photoChange('#foto','DELETE');">
</div>
</form><!--sii.load copyright -->
 </div>

 <iframe name="connect9" src="/html/licenced.txt" style="display:none"></iframe>
 <div class="loading_modal"></div>
</body>

<!-- jQuery core -->
<script src="../js/jquery/jquery-2.2.1.min.js"></script>

<!-- Sinfonix core -->
<script src="../js/utils.js"></script>
<script src="../js/utils_jqu.js"></script>

<script src="../cgi-bin/sinfonix.js?AD-0354464104726F6F7403323535023937%20IN630.js"></script>

<script src="../js/jquery/plugin/popImg.js" defer="defer"></script>
<script src="../js/jquery/plugin/jquery.progress.js" defer="defer"></script>

<link  href="../js/jquery/plugin/jquery.modal.css" rel="stylesheet" />
<script src="../js/jquery/plugin/jquery.modal.js" defer="defer"></script>

<!-- metro UI CSS 3.0 -->
<xlink  href="../js/demo/metro/docs/css/metro.css" rel="stylesheet">
<xscript src="../js/demo/metro/docs/js/metro.js" defer="defer"></script>

<!-- jQuery UI -->
<link  href="../js/jquery-ui/jquery-ui.css" rel="stylesheet" />
<script src="../js/jquery-ui/jquery-ui.min.js" defer="defer"></script>


</body>
</html>

El cual se puede resumir (para los efectos) de la siguiente manera:

<style>
 .title {
  text-decoration: none;
  color:#fff;
  font-size:25px;
} 
</style>
...
...
...
   <td nowrap align="right"><a class="title" href="javascript:CallSQL('^CIA.sql','list','','LoadCompany','key%20codigo%20nombre');">Compañia de Prueba, S.A.&nbsp;&nbsp; </a></td>
  </tr>
...
...
...
 <td>
  <div id="tabs-content" class="tabs-resizer" style="padding:5px;    width:989px; height:419px">
   <div id="tabs">
    <ul>
     <li><a href="#Precios">Listas de Precios y Unidades de Medidas</a></li>
     <li><a href="#Proveedores">Modelos de los Proveedores</a></li>
     <li><a href="#Adicionales">Datos Adicionales</a></li>
    </ul>
    <div id="Precios" style="padding:0px" align="center">
     <table class="Body" width="100%" height="100%">
      <tr>
       <td valign="top"><span class="title">Listas de Precios</span><div align="center">
        <table border="0" cellspacing="0" cellpadding="0">
         <tr>
          <th class="LN" nowrap>Descripción</th>
          <th class="LN" nowrap colspan="2">PRECIO 1</th>
          <th class="LN" nowrap colspan="2">PRECIO 2</th>
...
...
...

Como verán tengo la clase class="title" la cual se caracteriza por dar un color blanco a la fuente, esta clase la utilizo en 2 partes diferentes del documento pero he aquí el problema: el fondo donde utilizo la primera clase es negro y el fondo donde utilizo la segunda clase es blanco, obviamente el contenido de la fuente no se nota con fondo blanco.

Ahora mi pregunta es la siguiente:
puedo yo hacer con CSS (sin modificar el código HTML pero si basándonos en su contenido), hacer que el color de la clase cambie?.

NOTA:
Puedo yo conjugar las clase "title" que esta dentro de otra clase para que se comporte diferente. (notese que en la segunda clase esta dentro de la clase "tabs-resizer").

Es decir, tengo esto:

<style>
 .title {
  text-decoration: none;
  color:#fff;
  font-size:25px;
} 
</style>

y quiero esto:

<style>
 .title {
  text-decoration: none;
  color:#fff;
  font-size:25px;

 .tab-resizer.title {
  text-decoration: none;
  color:#000;
  font-size:25px;
} 
</style>

Es esto posible?

4
  • Si accede primero al elemento HTML y después a su clase, table tr td .title span .title no creo que este sea el selector correcto, pero es lo que puedes hacer
    – Yikarus
    Commented el 9 may. 2017 a las 18:50
  • @Lixus, aunque no muestro el contenido completo, el primer "title" también esta en una tabla por lo que sugieres no creo me resuelva, lo que si tengo es otra clase que es "tabs-resizer" sera que puedo conjugar estas 2 clases?
    – fwBasic
    Commented el 9 may. 2017 a las 18:53
  • Ya te dejé una respuesta, igual y si quieres pon tu tabla completa para así ver si debo modificar el snippet para que se ajuste a tu tabla
    – Yikarus
    Commented el 9 may. 2017 a las 18:53
  • intentare colocarla completa
    – fwBasic
    Commented el 9 may. 2017 a las 18:59

3 respuestas 3

1

Si se puede, solo tienes que agregar otra clase...

La clase title te da los estilos comunes y agrega una clase adicional para los estilos diferenciados.

En el ejemplo, ambas capas tienen el estilo title que hace que el texto salga en negritas y centrado. Pero uno de los elementos tiene una clase adicional que hace que el texto sea blanco y el fondo negro.

.title {
  text-align: center;
  font-weight: bold;
  font-size: 1.3em;
 }
 
 .tabs-resizer {
   margin-top: 30px;
   background-color: black;
   color: white;
 }
<div class="title">Este es un título</div>

<div class="tabs-resizer">
  <div class="title">El título con fondo negro</div>
</div>

Nota

Se modifica el ejemplo, para ajustarse a las condiciones de la pregunta.

7
  • Este código lo tengo replicado en todo el proyecto por lo que es necesario hacerlo solo a través de CSS, No puedo modificar el código HTML.
    – fwBasic
    Commented el 9 may. 2017 a las 19:08
  • Opino que es lo mismo, voy a modificar mi respuesta...
    – toledano
    Commented el 9 may. 2017 a las 19:10
  • Estimado @toledano, gracias por tu pronto respuesta pero ya la clase existe y es tabs-resizer, entonces quisiera conjugar esta con title pero en un archivo que ya tengo donde están los estilos, sin modificar el código HTML
    – fwBasic
    Commented el 9 may. 2017 a las 19:10
  • @fwBasic eso es exactamente lo que hice.
    – toledano
    Commented el 9 may. 2017 a las 19:13
  • Ah caramba!!.. Disculpa... Lo probare! solo que no se ve como esperaba que fuese ;))...
    – fwBasic
    Commented el 9 may. 2017 a las 19:23
0

Si puedes, solo debes de acceder primero al elemento HTML, en este caso span y td respectivamente, y después de eso modificas sus atributos de CSS.

Te dejo un ejemplo para que veas como:

span.title{
  background-color: red;
}

a.title{
  background-color: green;
}
<span class='title'>Hola mundo</span>

<table>
<tr>
  <td><a href='' class='title'>HOla a todos</td>
</tr>
</table>

1
  • Gracias @Lixus pero sera que eso lo puedo hacer con la clase "title" + "tabs-resizer"? alguna manera de conjugarlas?
    – fwBasic
    Commented el 9 may. 2017 a las 18:57
0

Si es posible lo que pensaba, lo que quería es lo siguiente:

body {
  background-color:#000;
  color:#fff;
}
.title {
  text-decoration: none;
  color:#fff;
  font-size:25px;
}
.tabs-resizer {
  background-color:#fff;
  color:#000;
}
.tabs-resizer .title {
  color:#000;
}
<span class="title">Titulo de la pagina
</span>
<p>Contenido de la pagina</p>
<div class="tabs-resizer">
<span class="title">Titulo de las lineas
</span>
<p>lineas del documento</p>
<p>lineas del documento</p>
<p>lineas del documento</p>
</div>
<span class="title">Pie de pagina
</span>

Notese que tabs-resizer invierte body por tanto tabs-resizer conjugado con title (que si se puede) invierte el color de la fuente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.