how to give different style with CSS using the same class but in different environments

Navigation
0

I have the following HTML code: 

<!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>

Which can be summarized (for the purposes) as follows: 

<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>
...
...
...

As you will see I have the class class="title" which is characterized by giving a white color to the source, this class I use in 2 different parts of the document but here is the problem: the background where I use the first class is black and the background where I use the second class is white, obviously the content of the font is not noticeable with a white background.

Now my question is this:
can I do with CSS (without modifying the HTML code but if based on its content), make the color of the class change?.

NOTE:
I can combine the class " title " that is inside another class so that it behaves differently. (note that in the second class is within the class " tabs-resizer ").

I mean, I have this: 

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

and I want this: 

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

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

Is this possible?

    
asked by fwBasic 09.05.2017 в 20:48
source

3 answers

0

If possible what you thought, what I wanted is the following: 

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>

Note that tabs-resizer reverses body so tabs-resizer conjugated with title (if can) invert the color of the font.

    
answered by 09.05.2017 / 22:07
source
1

If you can, you just have to add another class ...

Class title gives you the common styles and adds an additional class for differentiated styles.

In the example, both layers have the title style that makes the text bold and centered. But one of the elements has an additional class that makes the text white and the background black. 

.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>
  

Note

     

The example is modified to suit the conditions of the question.

    
answered by 09.05.2017 в 21:04
0

If you can, you should only access the HTML element first, in this case span and td respectively, and after that modify its CSS attributes.

I'll give you an example so you can see how: 

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>
    
answered by 09.05.2017 в 20:53
Can 2 parameters be sent in ng-show, angularjs? How can I remove a contact from a binary file in c