15/11/2016 LaespecificidadenHojasdeEstiloCSS::EjemplosCSS

DiseodePginasWebenMadrid,Espaa.Comohacerunapginaweb.PortaldelDiseadorWeb::
LaWebera.es

Manuales
Ejemplos
Cursos
Notas

LaWebera.es>Comohacer>EjemplosCSS>LaespecificidadenHojasdeEstiloCSS
Escribeeltextoabuscar Buscar

LaespecificidadenHojasdeEstiloCSS
Actualizadoel05/10/2013<>0Comentarios

Resumen:Unpequeoperoeficazconsejoquepuedodarparatodosaquellosqueempiezanadesarrollarsus
primerashojasdeestiloCSS,estenerencuentaelfactordelaespecificidadenCSS,suinfluenciayla
maneradecontrolarlo.

Unpequeoperoeficazconsejoquepuedodarparatodosaquellosqueempiezanadesarrollarsusprimeras
hojasdeestiloCSS,estenerencuentaelfactordelaespecificidadenCSS,suinfluenciaylamanerade
controlarlo.

Laespecificidadesunapropiedadpocasvecesvaloradapormuchosdesarrolladoreswebnovatos,yquepor
lomismopuedecausarladesesperacindemsdeunoalmomentodeaplicarestilosanuestrocdigo.

QueslaespecificidadenCSS?
Enquconsiste?Bsicamentelaespecificidadserefierealvalorquetomacadaunodeloselementosde
unahojadeestilo,hayselectoresquetienenmspesoeimportanciaqueotros,esdecirmsespecificidad.

Entremsespecificidadexista,tendremosmenosposibilidadesdeequivocarnosalaplicarelestiloque
queremosaciertoelemento,yesahdondeladesesperacindenoobtenerloquequeremosdesaparecer.

ComocalcularlaespecificidadCSS
ExisteunaformasencilladecalcularlaespecificidadCSS,esmedianteunafrmulaconsideradaincluso
comounclculoyaestandarizado.ConsisteensumarlospuntostotalesdeunasentenciaCSSenbasealos
selectoresoelementosdelosqueestcompuesto.

Seledaunvalorde1puntoaunelementosimplecomounaetiquetaa,podiv,aunselectordeclaseseleda
elvalorde10puntosyaunselectordeidseledaunvalorde100puntos,siendonicamentesuperadopor
losatributosdeestilosalosqueselesdaunvalorde1000puntos.

Esdecirsupongamosquequeremosagregarunestilolosprrafosdenuestrodocumento,siagregamosen
nuestroCSSunselectorp{},esteserutilizadoparadarestiloatodoslosprrafosdelHTML,peroslose
ledarelvalortotalde1punto,estoquieredecirquetienepocoespecificidad.

PorlocualsiexisteotroselectorenelmismoCSSquedigaas.parp{}tendrmayorimportanciaque
elanterior,yaqueleestamosagregandounaclaseporloquelaespecificidadaumentaen10puntosesdecir
10puntosporelselectorclasems1puntoporelelementonosda11puntos.

Delamismamaneraestoseaplicaparalosid,siagregamosunalneaquediga#parrp{}estatomarel
valorde101puntosdeespecificidad,porloqueserlamsimportante,aspodemoscrearcombinaciones
http://www.lawebera.es/comohacer/ejemploscss/especificidadhojasdeestilocss.php 1/4
15/11/2016 LaespecificidadenHojasdeEstiloCSS::EjemplosCSS

paraquelosestilosseapliquencorrectamente.

UnejemplodeespecificidadconCSS
ConelsiguientecdigoCSS:

p{
background:crimson;//Especificidadde1punto
}
.par{
background:pink;//Especificidadde10puntos
}
p.par{
background:maroon;//Especificidadde11puntos
}
#parr{
background:orange;//Especificidadde100puntos
}
p#parr{
background:red;//Especificidadde101puntos
}
p.par#parr{
background:green;//Especificidadde111puntos
}

ObtendrlossiguientesresultadossiinsertoestebloqueenmiHTML:

<p>Elfondodeesteprrafosercolorcarmes</p>
<pclass="par">Elfondodeesteprrafosercolorgranate</p>
<divclass="par">Estedivtendrelfondodecolorrosa</div>
<pid="parr"class="par">Elfondodeesteprrafoserdecolorverde</p>
<pid="parr"style="background:black;">Elfondodeesteprrafosernegroporqueuseunatributo
deestilodentrodelaetiqueta</p>
<pid="parr">Elfondodeesteprrafoserrojo</p>

TenganenmenteestosnmerosalmomentoderealizarsusCSSynoseconfundirnalmomentode
desplegarsuwebensunavegador,yaqueobtendrnloquecalcularon.

Seguirelmanual

Anterior:CrearunagaleradeimgenessoloconCSSyHTML
Siguiente:FondoscongradientesdegradadosconCSS3

Publicadoel26/07/2010,ltimaactualizacin05/10/2013.

Seguira@lawebera

Licencia:ContenidoexclusivodeLaWebera.es.Prohibidasucopia.

Autor:ISCDanielErnestoNavarroHerrera

URL:LaWebera.es::DiseoPaginasWeb

(Subiraltexto)

AadirComentario

*Camposobligatorios
*Nombre
*Correoelectrnico(nosepublica)

http://www.lawebera.es/comohacer/ejemploscss/especificidadhojasdeestilocss.php 2/4
15/11/2016 LaespecificidadenHojasdeEstiloCSS::EjemplosCSS

Enviarcomentario
Megusta 3 Twittear 0
MeneameBitacoras

FacebookTwitterGooglePlusRSS

ManualesyArtculosWeb
Cdigosdeejemplo
ManualJavaScript.BucleFor
LaespecificidadenHojasdeEstiloCSS
10sencillosconsejosparamejorartusformularios
ComohacerunforoenWordPressconSimple:PressForum(segundaparte)
DesplazamientoanimadoenanclasdeenlacesconjQuery
Cmocambiarelestilodenuestrositiodinmicamente?ParteIVFinal
FormasdecrearuntextoverticalconCSSyHTML
SolucionesalosproblemasdevisualizacinenInternetExplorer
SombrasydimensionesconCSS3boxshadow
ManualJavaScript.Ejemplosdecdigo
Comohacerfondoselsticosparattulosymens
ComohacerunforoenWordPressconSimple:PressForum(terceraparte)
ManejodeimgenesconjQuery:Desplieguesecuencial
AnimartextoconCSS3yWebKitparaChromeySafari
Usodegeolocation
EfectocortinaconCSS3,jQueryyMooTools
EnlaceparamostraryocultarcontenidoconjQuery
GalerasdeImgenesconScriptaculous:Lightboxparapaginasweb
EspecificarunCSSDiferenteporPostenWordPress
ProtocoloSitemap

Acercade
Contacto
Newsletter
MapaWeb
SerRedactor
BajoWordPress

ltimasNovedades

http://www.lawebera.es/comohacer/ejemploscss/especificidadhojasdeestilocss.php 3/4
15/11/2016 LaespecificidadenHojasdeEstiloCSS::EjemplosCSS

Ecommerce:comoaumentareltrficoatravsdeGoogle+
CmohacerSEOen2015
Tooltipsparasitioswebmviles
5formasdemejorarlaexperienciadeusuariodetuaplicacinmvil
Tiposdeconfiguracindesitioswebparamviles

VernicaMilnDiseadorWebFreelance

20062016LaWebera.es
AvisoLegalPrivacidadCookies
AlojadoenCyberNETicos

http://www.lawebera.es/comohacer/ejemploscss/especificidadhojasdeestilocss.php 4/4