Demo de especificidad y orden en selectores

Los !important estarán por encima de los demás estilos. Sin embargo, son mala práctica y no se deberían usar.
Los estilos embebidos en el HTML, es decir inline styles están por encima de las clases y IDs. Sin embargo, también se deberían evitar.
Los IDs están por encima de las clases. Los IDs son específicos, si se usa uno en un archivo HTML ya no se podrá repetir más en ese mismo archivo. Mientras que las clases si se pueden repetir en cualquier elemento.
Un estilo de etiqueta es el último valor que el navegador tiene en cuenta antes de tomar los estilos por defecto de esa etiqueta. Los estilos de etiqueta son los que menos peso tienen.

Jossie Steeven Quintero Giron

**Recuerda! ** Si no se cargan los estilos que tu deseas es por que hay otro(s) elector(es) con mayor importancia que el tuyo

Jossie Steeven Quintero Giron

Para ahorra tiempo, Visual Studio Code tiene una función llamada Emmet Abbreviation donde podras colocar toda una estructura.

davidegc

En Visual Studio Code puede utilizar este atajo para crear rápidamente un menú de navegación:

header>nav>ul>li*4>a + TAB

Jossie Steeven Quintero Giron

Mauricio Coronado

Otra forma de agregar un estilo particular (en nuestro caso un color de fondo diferente) a la última etiqueta “<a href=”">Blog</a>" es con una pseudo-clase “last-child”. Esta pseudo-clase nos ayuda a agregar estilos al último elemento hijo entre sus hermanos, pero, hay que tener en cuenta que las etiquetas “<a>” del ejercicio no están bajo un mismo elemento padre “<li>”, por lo tanto las etiquetas “<a>” no son hermanas:

<ul id="main-nav" class="nav">
	<li><a href="">Home</a></li>
	<li><a href="">Cursos</a></li>
	<li><a href="">Instructores</a></li>
	<li><a href="">Blog</a></li>
</ul>

Para solucionar este problema toca aplicar la pseudo-clase “:last-child” al elemento “<li>” en nuestro selector en la hoja de estilos ya que tienen un mismo padre “<ul id=“main-nav” class=“nav”>, pero, para que aplique el estilo a la etiqueta “<a href=””>Blog</a>" hay que descender hasta ésta:

#main-nav li:last-child a {
	background: orange; 
}

el resultado:

Victor Gea

Esta extensión de Visual Studio Code te permite ver des de tu css las clases que tienes declaradas en tu html
https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion

Fabiola Vanesa Castro Juárez

SANTIAGO GUÁQUETA ANGARITA

Una de las cosas que he aprendido en el corto tiempo que llevo en esto, es que una de las razones por las cuales utilizar un Framework como Bootstrap es una mala práctica, es que utiliza muchos important, construí una página utilizándolo y efectivamente realizar algunos cambios en los estilos fue super complejo. Excelente la explicación!

David Valencia

He aquí mis apuntes https://www.notion.so/Especificidad-en-selectores-2fdd4a69d1cd409386453d03fa0b6352
Pueden también comentar si gustan y duplicarlos

Iván Arcos

En esta tabla podemos ver los niveles de especificidad por selector:

Espinosa Alejandra

Agustin Mites

Mas halla de llevar un orden y no caer en malas prácticas, es que debemos generar código de humanos para humanos y no crear código para el computador, porque, con malas prácticas podemos llegar al resultado. La verdad es muy molesto encontrar líneas de css que para agregar o solucionar un problema (tal vez por pereza o bueno quien sabe) les basto con usar el important o estilo en línea. Entonces lo mejor siempre será pensar en que en un futuro tenemos que modificar el mismo proyecto y si usamos malas prácticas, será un dolor de cabeza

Lucy Taype

Todas las propiedades completas de CSS3 bien explicadas 👏
☑ https://www.mclibre.org/consultar/amaya/css/css-propiedades.html

Aldo Miguel Ortiz Parodi

26. Mis apuntes sobre: “Demo de especificidad y orden en selectores”

Un ID solo puede pertenecer a un solo elemento por documento HTML, pero un elemento puede tener una o más clases, las cuales incluso pueden ser compartidas entre varios elementos.

Cuando se agregan los font-family por defecto se agregan 3, para que en caso no haya el primero en el navegador, se agregue el segundo sino el tercero.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Demo</title>
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Empresa</h1>
        <nav>
            <ul id="main-nav" class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">Cursos</a></li>
                <li><a href="">Instructores</a></li>
                <li><a href="">Blog</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Christian Silvero

HERENCIA Y ESPECIFICIDAD
- Herencia:
  
  Algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto.
  - inherit: Hereda el valor de la propiedad del elemento padre.
  - initial: Establece el valor que tenía la propiedad inicialmente.
  - unset: Combinación de las dos anteriores: Hereda el valor de la propiedad del elemento padre, y en caso de no existir, su valor inicial.
- Especificidad:
  1. Importancia
    1. Estilos del navegador
    2. Estilos nuestros
    3. !important (mala práctica)
  2. Especificidad
    - Calculadora: https://www.codecaptain.io/tools/css-specificity-calculator
    1. !important | (1,0,0,0,0)
    2. <style> | (0,1,0,0,0)
    3. #id | (0,0,1,0,0)
    4. .class | (0,0,0,1,0)
    5. tag | (0,0,0,0,1)
  3. Orden en las fuentes
    
    En nuestros estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto.

Dani-Ideas

Les dejo mis notas de esta clase(al menos la mayoria):

Orlando Lara

Lo que el profesor menciona como CSS Reset, tiene una importancia inimaginable. Es una de las cosas que cualquier frontend developer desearía haber sabido desde un principio. Al hacer ese reset, le decimos al navegador: ¿sabes que? no quiero tus márgenes ni tus paddings, ni que coloques el borde por fuera de la caja. Ténganlo presente siempre; me atrevería a decir que es lo primero que debes colocar siempre.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Pero no todo es color de rosas, y ésto trae algunas desventajas. Por ejemplo, cuando creas una lista (ya sea ordenada o no), no vas a verla como se ve regularmente (con sangría y bullets), pero ésto lo puedes solucionar agregando en dichas listas el margen y/o padding correspondiente. Generalmente es engorroso tener que ponerle margen y/o padding a todo, pero vale la pena mirar tu página y darte cuenta de que todo está en donde tiene que estar y que el navegador no está molestando tus estilos.

Juan Diego Carranza Vega

Mas detallado el tema de especificad y selectores:
https://www.w3schools.com/css/css_specificity.asp

Julio Carlos

Tenia algunas dudas con respecto a la prioridad pero lo practique pausando el vídeo y termino dándome el mismo resultado que al profesor, ya entendí las prioridades, les recomiendo que si tienen dudas, háganlo ustedes mismos para que lo logren entender mejor.

Jhonny Danael Torres Caraballo

Ahora pregunto!
Ese numeral # o el * o el punto (.) o incluso sin tener nada de esos código ASCII que importancia o cuando se debe utilizar dichos numerales?

YANDEIVIS NAYINJER BETANCOURT VILLEGAS

hace 10 meses

Practicar mucho se te va grabando en la mente las etiquetas se puede aprobar el curso pero si no se practica se pierde

Donny Vasquez

Conozco gente que todo lo arregla con !important, aunque no sea !important.
JAJAJAJAJAJAJA, el que entendió, entendió!

Cristian Ramos

Los ID son únicos, no puedes tener más de un ID con el mismo nombre

Olivier Lietaert

De otro curso ya conocía la especificidad pero no sabía que se tachaban los estilos no utilizados de la consola, cosa que había visto muchas veces. Por cierto, muy bien explicado

María Del Pilar Chávez Gutiérrez

hace 9 meses

Demo de especificidad y orden en selectores

NOTA Las clases son genéricas y los id son únicos y específicos, no podemos tener el mismo id en dos elementos al contrario que las clases.

Villón Fátima

Les dejo un enlace de codepen con ejercicios de práctica referentes al curso!

👉 Codepen - CSS-Master - Collection 🔥

Barragan Albani

hace 7 meses

recordar:
las clases son genéricas
los **id ** unicos y especificos(no repetir)

Eufanzky

Mis apuntes

Juan Ignacio Portilla Kitroser

HERENCIA en CSS
INHERIT: Usa el valor del padre
INITIAL: se dara el valor inicial y predefinido por el navegador
UPSET: si tiene padre, heredara su valor, si no, dara el valor de INITIAL
¿Cómo se controla el orden al declarar CSS?
Primero cargara el estilo que el navegador decida. Luego las declaraciones de nuestro .css. Y por ultimo, declarara los important (!important) en nuestro .css.

Nuestro VS code, cuando colocamos el cursor encima de las declaraciones de nuestro .css nos dira el numero de especifidad.

Victor Andres Castillo Zambrano

listo. Aunque tengo una pregunta, para practicar la clase anterior con las pseudoclases, agregue una para activar hover, pero no logre hacer que funcionara, e intente de muchas formas, les mostrare el codigo a ver si me pueden indicar si cometi algun error.

<code>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1 {
    color: rosybrown;
    font-family: serif;
    margin-bottom: 10px;
    padding-left: 15px;
}

#page-title {
    font-family: Arial, Helvetica, sans-serif;
}

.title {
    font-size: 18px;
}

#main-nav {
    padding-left: 15px;
    text-decoration: none;
}

#main-nav{
    margin-top: 10px;
    list-style-type: none;
}

#main-nav li {
    display: inline-block;
}

#main-nav a {
    color: white;
    background-color: violet;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

.nav__item a:hover {
    color: black;
}

Luis Felipe Medina Rodriguez

Captura de pantalla de 2020-10-05 14-48-57.png

Hugo Andres Marrugo Polo

Buen Material para saber cuando usar #id y .clases:
https://www.campusmvp.es/recursos/post/clases-ids-css-cuando-como-usarlas.aspx

Francisco Encabo Servián

Es una buena práctica no utilizar nunca el id para aplicarle estilos. Utiliza el id para comunicación con el backend o para darle alguna funcionalidad con JavaScript. Así ya sabes que no tendrás demasiados picos de especificidad en tu CSS.
Límitate a darle estilos solo con class.

Gianfranco Iván Misari Ortega

Si quieren arman en una sola línea las etiquetas “header>h1>nav>ul>li”, gracias a embed se puede hacer. Visual Studio Code tiene por defecto, en otros programas tendrías que descargarte la extensión

Gabriel Carreño

hace 9 meses

orden de precedencia:
![](

Cristian Acalo

hace 8 meses

🦄Especificidad

No es recomendable usar el !important
Los estilos embebidos en el HTML, es decir, los inline styles están por encima de las clases y IDs. Estos se colocan en la propia etiqueta html, y como sabemos que no es bueno ubicar estilos directos en nuestro html, es una mala práctica usarlos.
El #id debe ser único para un solo elemento, mientras que las .class pueden ser genéricas, es decir, se pueden usar en varios elementos.
Se tendrá más especificidad cuando se utilizan varios selectores, por ejemplo:
- #main .main-title h1 tendrá una especificidad de 0.0.1.1.1
Hay que tomar en cuenta que los estilos que se muestran en nuestra página dependerá de el lugar en donde estén ubicados, es decir, si nosotros declaramos un estilo a un selector al inicio y al final del archivo css el navegador utilizará el estilo que se encuentre al final de la misma.

Edison Manrique

Fuente: https://css-tricks.com/specifics-on-css-specificity/

Juan Pablo Jimenez

hace 10 meses

27.-Demo de especificidad y orden en selectores

Se pueden usar varias clases mientras no se exceda en la cantidad de clases y por cada etiqueta no se puede tener más de un ID. El id es único y específico, solo puede existir ese id en la página. Funciona para CSS y JS.

Siempre que veamos en el inspector de elementos los estilos siempre los regresa de los más importantes a los menos importantes.

Patrick Jeremy Rodriguez Sandoval

Un estilo embebido, es mas pesado que una clase y un style juntos.

DAVID MURCIA

¿porque se puede necesitar “class” y “ID” al mismo tiempo en un elemento para definir stilos?

varios elementos pueden tener la misma clase “class” por ejemplo para tener un estilo de fuente generico en la pagina… pero ademas de una clase podremos agregar en el mismo elemento un ID para por ejemplo cambiarle el color de fondo. de esta forma hemos modificado el estilo de un elemento en especial y a su vez este conserva estilos de un grupo mas grande de elementos.

Diego Fernando Torres Coy

Muy buena esta clase!

JoaoGarduno

Orden o jerarquía de la lectura de CSS:

!important
<inline style>Estilos embebidos en el HTML, no es buena práctica
ID’s
Clases
Tags o Etiquetas del HTML

Fabian Flores

TIP: En Visual Estudio Code cuando colocas arriba el cursor puedes ver el selector de especificidad

Captura de pantalla 2021-04-11 222651.png

Israel Lopez Lujan

Un ID no puede usarse repetidas veces en una página, una clase si.
Esto es porque las clases son genéricas y los ID específicos.

Axcel Javier Rincón Gomez

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Demo</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<header class=“page-header”>
<h1 id=“page-title” class=“title”>Empresa </h1>
<nav>
<ul id=“main-nav” class=“nav”>
<li><a href="" class=“home”>Home</a></li>
<li><a href="" class=“cursos” >Cursos</a></li>
<li><a href="">Instructores</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contactanos</a></li>

<li>
<a href="" class=“Contactano” > Contactano</a>
<!-- LO QUE LE FALTA A LO DE ARRIBA A LA MALA PRACTICA–>
</li>
</ul>
</nav>
</header>
</body>
</html>

{
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
color: purple;
font-family: serif;
margin-bottom: 10px;
}
/* asi se llama id */
#page-title {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.title {
font-size: 18px;
font-family: monospace;
}
#main-nav {
margin-top: 10px;
list-style-type: none;
padding-left: 0;
}

/* PONER DE MANERA HORIZONTAL*/
#main-nav li {
display: inline-block;
}

#main-nav a {
color: white;
background-color: darkcyan;
padding: 8px;
border-radius: 20px;
text-decoration: none;
}

/ESTILO INDEVIDO Y POR ESO NO SE APLICA/
#main-nav .Contactano {
background-color: blue;
}

#main-nav .home {
background-color: brown;
}

#main-nav .cursos {
background-color: red;
}

Daniel Rojas Artiaga

Si quieres darle instrucciones especiales a algun elemento, tambien podrian usar nth-child

de esta manera

.main-nav__item {
    display: inline-block;
    background-color: #13a4a4;
    border-radius: 2px;
    padding: 5px;
}

.main-nav__item a {
    text-decoration: none;
    color: white;
}

.main-nav__item:nth-child(4) {
    background-color: orange;
    font-size: 20px;
}

y de esta menra aun estamos generando las convenciones BEM apra la creacion de css

Josafat Muñoz Valverde

Otra forma de solo elegir el ultimo elemento es con :last-child, yo lo hice así:

#main-nav li:last-child a{
    background-color: red;
}

Carlitos Lopez Guevara

Silfrancis Soriano

una pregunta solo pro curiosidad, la etiqueta <main> no la declarate en html pero si la esta usando en css como clase?

gracias

Stiven Ruiz Valencia

Peso selectores

estilos inline = 1000
IDs = 100
Clases, atributos y pseudo-clases (:hover, :focus) = 10
elementos y pseudo-clases (:before, :after) = 1

Hugo Rodriguez

Este ejmplo de https://css-tricks.com/specifics-on-css-specificity/ me parece más claro:

Roger Flores

Interesante yo si me preguntaba porque habian 3 tipos de letras en font-family ya que como lo dice el profesor Diego si la computadora en este caso no tiene instalada la letra Arial, usa la Helvetica y si no tiene instalada la Helvetica utiliza la Sans-serif

JaviRome94

pero es mas recomendable solamente hacer o un class o un id ustedes escogen, entiendo perfectamente eso de la especificidad y se dice que los id son necesarios para JavaScript pero saben en Js también se puede llamar a las clases con ClassName y se dice que es mejor utilizar class que id, sigo sin entender el porque pero así lo recomiendan, ustedes que piensan los veo…

Jose Luis Grande Acevedo

La etiqueta nav va a llevar la barra de navegación. Los id son únicos y específicos no puedo tener el mismo id en dos elementos y las clases son genéricas, puedo tener una clase en diferentes elementos.

Harrinson Quintero

Importante recordar:
_"…en algunos proyectos tendrás que agregar uno, dos o tres clases e incluso un ID en cada uno de los elementos siempre y cuando no excedas en la cantidad de clases. Por cada etiqueta no puedes tener más de un ID…"
_
Id: Son únicos y específicos
Class: Son genéricas

Abraham Moisés Marquina Pérez

dejo por aqui una ayuda de CSS https://www.w3schools.com/css/
es muy util

Zakowicz Osvaldo Emanuel

Qué diferencia hay entre llamar al selector universal para “re establecer” algunos estilos del navegador, o usar normalize.css (o similares)?

Railly Hugo

++Especificidad: ++
.

Important
inline-styles
#IDS
.Class
<Tags>

Sebastian Alejo Becerra

me llama mucho la atención que “div” o “nav” las pronuncie difff y naffff
XD

Alexander luna vargas

No entiendo porque en el minuto 10:34 al #main-nav le pone padding-left:0; si en las primeras líneas le coloco al selector universal * padding 0

valeria Tobon

hace 3 días

Hey guys !

HERENCIA Y ESPECIFICIDAD

Herencia:

Algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto.
    inherit: Hereda el valor de la propiedad del elemento padre.
    initial: Establece el valor que tenía la propiedad inicialmente.
    unset: Combinación de las dos anteriores: Hereda el valor de la propiedad del elemento padre, y en caso de no existir, su valor inicial.

Especificidad:

    Importancia
        Estilos del navegador
        Estilos nuestros
        !important (mala práctica)

    Especificidad
        Calculadora: https://www.codecaptain.io/tools/css-specificity-calculator
        !important | (1,0,0,0,0)
        <style> | (0,1,0,0,0)
        #id | (0,0,1,0,0)
        .class | (0,0,0,1,0)
        tag | (0,0,0,0,1)

    Orden en las fuentes

Juan Felipe Angarita Lopez

Juan Felipe Angarita Lopez

Juan Felipe Angarita Lopez

Naudy José Romero Valero

cuando te explican la teoría no lo entiendes a la primera pero con este ejemplo práctico se me hizo mucho más fácil.

Abidan Triguero Calle

hace 6 días

RESUMEN CLASE 28:
DEMO DE ESPECIFICIDAD
Y ORDEN EN SELECTORES

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Empresa</h1>
        <nav>
            <ul id="main-nav" class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">Cursos</a></li>
                <li><a href="">Instructores</a></li>
                <li>
                    <a href="" class="blog">Blog</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1 {
    color: purple;
    font-family: serif;
    margin-bottom: 10px;
}
#page-title {
    font-family: Arial, Helvetica, sans-serif;
}
.title {
    font-size: 18px;
    font-family: monospace;
}
#main-nav {
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0;
}

#main-nav li {
    display: inline-block;
}

#main-nav a {
    color: white;
    background-color: #121f3d;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

#main-nav .blog {
    background-color: red;
}

Jeisson Espinosa

hace 7 días

Información resumida de esta clase
#EstudiantesDePlatzi

Por cada etiqueta no se puede tener más de un id ya que debe ser único para cada etiqueta o elemento.
Las clases son genéricas, es decir, yo puedo tener la misma clase en varios elementos y esto va a ser que el estilo se aplique a todos los elementos que tengan esta clase
El id en CSS lo llamamos con el #
Debemos evitar el estilo embebido

OCTAVIO BERTORELLO

ID: son unicos, solo puede haber uno con ese nombre por pagina class: son genericas, pueden repetirse. Es mas hay veces que se utilizan dos class en la misma etiqueta para darle un nivel mas alto de especifidad

OCTAVIO BERTORELLO

OCTAVIO BERTORELLO

OCTAVIO BERTORELLO

Steen Philiph INCHE SAEZ

hace 24 días

En la ultima parte cuando implementa la clase blog para cambiar de color al ultimo elemento, necesitamos llamarlo mediante el ID e incluir la clase, por ejemplo:

#main-nav .blog {
background-color: red;
}

Pero si lo llamamos solamente mediante la clase:

.blog {
background-color: yellow;
}
En este caso no se aplica el estilo. Espero que les ayude 😄

Holman Alexis Lesmes Calderon

me duele el cerebro

Andrés Mejía López

Andrés Mejía López

José M. Veintimilla

Estilos embebidos

<li><a href="" style="background-color: orange;">Blog</a></li>

Puedo aplicar un estilo embebido a una etiqueta en html, pero esto no es una buena práctica. Si creáramos una clase para esta etiqueta no se aplicaría ningún estilo porque el sistema embebido es más importante que las clases.

<li><a href="" class="blog">Blog</a></li>

La forma correcta sería crear una clase para la etiqueta.

#main-nav .blog {
    background-color: orange;
}

Luego, aplicarle el estilo.

Laura Ysabel Sarabia Mora

Es importante recordar la metodología BEM, en este demo se debería también usar.

Anggi Vanesa Pallares Solis

Las clases son genéricas
los id son únicos y específicos

Jose Tellez

Lo ideal es usar principalmente clases y nombrarlas con una metodologia como BEM. Así tendrás un codigo más fácil de leer, limpio, escalable, replicable y manipulable. En resumen, trabajarás mucho mejor, más fácil y más profesional. Usar estilos embebidos e importants es como solo poner un parche y luego te traerá problemas cuando el codigo se ponga más complejo

Leal Brigitte

Es importante acotar que el **selector universal ( * ) **que permite añadir estilos a todas las etiquetas HTML dentro del body, es la propiedad menos especifica valiendo 0. Siendo incluso menos especifica que las mismas etiquetas. Aquí un ejemplo:

Luz Adriana Herrera Huitzache

Me encanto esta clase, me quedo más claro como funciona la especificad

Santiago Rodriguez Chaves

Especificidad.
VSC tiene la funcion para ver la especificidad de cada regla que se aplica en css
!important | (1,0,0,0,0)
<style> | (0,1,0,0,0)
#id | (0,0,1,0,0)
.class | (0,0,0,1,0)
tag | (0,0,0,0,1)

Esneyder Saavedra cardenas

Olincer Tadeus Garcia Cruz

Muy bien entendido.

Dayona Diocelyn Herrera Garcia

Creo que es mas recomendable utilizar clases, ya que también se pueden reutilizar

Juan Diaz

apenas estamos en la parte de css y ya empezamos con el debugging

Gilbert Ardila

super importante y super claro

José Gregorio García Viamonte

Yo lo hice de la siguiente manera para cambiar el color del background de “Blog”, aplicando la especifidad

#main-nav li:nth-child(4) a{
    background-color: orange;
}

Jorge A. Torres

GEnial clase

Alex Maurice

Aqui está mi ejemplo

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Empresa</h1>
    </header>

    <nav>
        <ul id="main-nav" class="nav">
            <li><a href="#">Contacto</a></li>
            <li><a href="#">Donaciones</a></li>
            <li><a href="#">Cursos</a></li>
            <li><a href="#">Intrucciones</a></li>
        </ul>
    </nav>
    
</body>
</html>>

<*{
    margin: 0;
    padding: 0;
}

#page-title{
    color: orange;
    font-size: 18px;
    font-family:Arial, Helvetica, sans-serif;
    padding-top: 5px;
    text-align: center;
}

#main-nav{
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0;
    margin-left: 5px;
    text-align: center;
    list-style-type: none;
    
}

#main-nav li{
    display: inline-block;
}

#main-nav a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    background: grey;
    padding: 5px;
    border-radius: 2px;
}
#main-nav a:hover{
    background: crimson;
}>

iecgerman

IMPORTANT ESTILO ENBEBIDO IDS CLASES ETIQUETAS

iecgerman

No se puede tener 2 id en dos elementos porque es único, en cambio las clases si pueden repetirse y le dan el mismo estilo a diferentes elemetos, esto funciona para CSS y para Java Script

Bryam Adonis Martinez Flores


/*ese aterisco es un selector universal */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    color: #fff;
    background-color: #a4a4a4;
    border-radius: 20px;

}
header {
    margin-bottom: 2px;
    width: 100%;
    height: 50px;
    background-color: #000;
}
header h1 {
    font-size: 30px;
    text-align: center;
    line-height: 50px;
}
nav {
    background-color: black;
    width: 100%;
    height: 50px;
    padding: 20px 35px;
    margin-bottom: 2px;
}
.main-nav {
    list-style: none;
    padding: 0;
}
.main-nav__item {
    display: inline-block;
}
.main-nav__item a:hover {
    color: red;
}
.main-nav__item a:active {
    color: white;
}
.main-nav__item a::after {
    content: " | ";
}
.main-nav__item a {
    text-decoration: none;
}
main {
    width: 69.8%;
    height: 500px;
    padding: 20px 35px;
    float: left;
    background-color: black;
    margin-right: 2px;
    margin-bottom: 2px;
}
aside {
    background-color: black;
    width: 30%;
    height: 500px;
    float: right;
    margin-bottom: 2px;
}
footer {
    background-color: black;
    width: 100%;
    height: 100px;
    padding: 20px 35px;
    clear: both;
}

Bryam Adonis Martinez Flores

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Portafolio profesional.">
    <meta name="robots" content="index,follow">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Programador BM.</title>
</head>
<body>
    <header class="cabecera">
        <h1>Bienvenidos a mi Blog.</h1>
    </header>
    <nav>
        <ul class="main-nav">
            <li class="main-nav__item"><a href="">Home</a></li>
            <li class="main-nav__item"><a href="">Servicios</a></li>
            <li class="main-nav__item"><a href="">Contactos</a></li>
        </ul>
    </nav>
    <main>
        <section class="contenido-principal">
            <h2>Mis skill</h2>
            <article>
                <p>contenido principal.</p>
            </article>
        </section>
    </main>
    <aside>
        <section class="contenido-secundario">
            <article>
                <p>numero de telefono</p>
            </article>
        </section>
    </aside>
    <footer class="pie-pagina">
        <p>
            creado Por 
            <br>Programador BM.
        </p>
    </footer>
</body>
</html>

angelmigurd

Santiago Gustavo López Bernal

He leído documentación en donde se menciona que las ID se deberían usar para cosas demasiado específicas.
Es por eso que se sugiere utilizar la metodología de BEM para nombrar las clases de manera tal que permita identificar el bloque, elemento y modificador. Me parece que es una buena práctica, en lugar de utilizar clases y ID al mismo tiempo

Figuera Marifel