Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
13
respuestas

[Duda] No encuentro mi error (pseudo clases)

Referente al curso HTML5 y CSS3 parte 4: Avanzando en CSS, en el capítulo Mejorando el CSS y actividad Explorando las pseudo-clases

por Carlos Alberto Cruz Olazo
| 55.3k xp | 21 posts
Ventas

Intento copiar todo tal cual sin embargo en el ultimo video no logro encontra el error ya que no logro que pinte "bold" las partes del parrafo solo lo intenta pero no concluye la operacion comparto mi codigo ojala me puedan apoyar

este es el .html

 <section class="diferenciales">

                <h3 class="titulopaginaprincipal"> Diferenciales </h3>

                <div class="contenido-diferenciales">

                    <ul class="lista-diferenciales">

                        <li class="items"> - Atencion personalizada a los clientes</li>
                        <li class="items"> - Espacio diferenciado</li>
                        <li class="items"> - Localizacion</li> 
                        <li class="items"> - Profesionales calificados</li>
                        <li class="items"> - Puntualidad </li>
                        <li class="items"> - Limpieza </li>

                    </ul><img src="diferenciales.jpg" class="imagen-diferenciales">

                </div>

            </section>

este es mi .css el first lo estoy llamando de la siguiente manera 

.items:first-child{

    font-weight: bold;
}
13 respuestas
por Juan David Villegas Pinto
| 82.3k xp | 5 posts

Hola Carlos, no entiendo muy bien a que te refieres con "las partes del párrafo" pero asumiré que intentas aplicar el estilo a todos los elementos de tu lista. Esto sucede porque estás usando la pseudoclase :first-child lo que hará que el estilo solo se aplique al primer elemento

por Carlos Alberto Cruz Olazo
| 55.3k xp | 21 posts
Ventas

Hola que tal juan mi intencion es aplicarlo al primer elemento, como bien mencionas asi funciona el :first-child sin embargo mi problema es que no se esta aplicando y estoy trabajando sobre el codigo que subi por este medio y no comprendo por que no se aplica

por AlexChilquilloQuispe
| 70.8k xp | 29 posts

He copiado tu código y si funciona, no entiendo que quieres decir con que " solo lo intenta pero no concluye la operación" en la instrucción le estás diciendo que solo pinte de negrita al primer li, que en este caso es:

  • - Atencion personalizada a los clientes

por Carlos Alberto Cruz Olazo
| 55.3k xp | 21 posts
Ventas

Este es mi .html 

<!DOCTYPE html>

<html lang="es">

    <head>

        <meta charset="UTF-8">

        <title> Barberia Alura </title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">

    </head>

    <body>

        <header> 

            <div class="caja">

                <h1> <img src="imagenes/logo.png"></h1>
                <nav>
                    <ul>

                        <li> <a href="index.html"> home </a> </li>
                        <li> <a href="productos.html"> productos </a> </li>
                        <li> <a href="contacto.html"> contacto </a> </li>

                    </ul>

                </nav>

            </div>


        </header>

        <img class="banner" src="banner.jpg">

        <main>

            <section class="principal">

                <h2 class="titulopaginaprincipal"> Sobre la Barberia Alura </h2>

                <img class="utensilios" src="imagenes/utensilios[1].jpg" alt="Imagen de utensilios de un barbero">

                <p>
                    Ubicada en el corazón de la cuidad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la Barberia Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.

                </p> 

                <p id="mision" >

                    <em> Nuestra misión es :

                        <strong> “Proporcionar autoestima y calidad de vida a nuestros clientes”. </strong> 

                    </em>

                </p> 

                <p>
                    Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, para asi ofrecer a nuestros clientes las ultimas tendencias. El atendimiento posee un padron de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.

                </p>

            </section>

            <section class="mapa">

                <h3 class="titulopaginaprincipal"> Nuestra Ubicacion </h3>
                <p> Muestro establecimiento esta ubicado en el corazon de la cuidad </p>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11007.247453920165!2d-46.6472131351411!3d-23.593798299549945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses-419!2smx!4v1683249389027!5m2!1ses-419!2smx" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </section>

            <section class="diferenciales">

                <h3 class="titulopaginaprincipal"> Diferenciales </h3>

                <div class="contenido-diferenciales">

                    <ul class="lista-diferenciales">

                        <li class="items"> - Atencion personalizada a los clientes</li>
                        <li class="items"> - Espacio diferenciado</li>
                        <li class="items"> - Localizacion</li> 
                        <li class="items"> - Profesionales calificados</li>
                        <li class="items"> - Puntualidad </li>
                        <li class="items"> - Limpieza </li>

                    </ul><img src="diferenciales.jpg" class="imagen-diferenciales">

                </div>

            </section>

            <div class="video">

                <iframe width="560" height="315" src="https://www.youtube.com/embed/2tKJnJKUHZg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

            </div>


        </main>



        <footer>

            <img src="imagenes/logo-blanco.png">
            <p class="copyrigth">&copy; Copyrigth Barberia Alura - 2020 </p>

        </footer>


    </body>


</html>
por AlexChilquilloQuispe
| 70.8k xp | 29 posts

Dale a inspeccionar seleccionando el párrafo, si hay algún error que esta haciendo que no coja la instrucción se te va a mostrar esa linea de codigo tachado ![](Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad ) si observas si se esta aplicando la instrucción

por Carlos Alberto Cruz Olazo
| 55.3k xp | 21 posts
Ventas

este es mi .css

body {

    font-family: 'Montserrat', sans-serif;
}


header {

    background-color: #BBBBBB;
    padding: 20px 0;
}

.caja {

    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav {

    position: absolute;
    top: 110px;
    right: 0;

}

nav li {

    display: inline;
    margin: 0 0 0 15px;
}

nav a {

    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {

    color: #c78c19;
    text-decoration: underline;
}

.productos {

    width: 940px;
    margin: 0 auto;
    padding: 50px;
}

.productos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.productos li:hover {

    border-color: #c78c19;
}

.productos li:active {

    border-color: #088c19;
}

.productos h2 {

    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2 {

    font-size: 33px;
}

.descripcion {

    font-size: 18px;
}

.precio {

    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;

}

footer {

    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 40px;
}

.copyrigth {

    color: #FFFFFF;
    font-size: 13px;
    margin: 20px;
}

main {

    width: 940px;
    margin: 0 auto;
}

form {

    margin: 40px 0;
}

form label, form legend {
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padron {

    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {

    margin: 20px 0;
}

.botonenviarformulario {

    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

.botonenviarformulario:hover {

    background: darkorange;
    transform: scale(1.20);
}

table {

    margin: 40px 40px;
}

thead {

    background: #555555;
    color: white;
    font-weight: bold;
}

td, th {

    border: 1px solid #000000;
    padding: 8px 15px;
}

/*css para nuestra home */

.banner {
    width: 100%;
}

.titulopaginaprincipal {

    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.principal p {

    margin: 0 0 1em;

}

.principal strong {

    font-weight: bold;
}

.principal em {

    font-style: italic;
}

.utensilios {

    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa {

    padding: 3em 0;
}

.mapa p {

    margin: 0 0 2em;
    text-align: center;
}

.contenido-diferenciales {

    width: 640px;
    margin: 0 auto;
}

.lista-diferenciales {

    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.items {

    line-height: 1.5;
}

.items:first-child{

    font-weight: bold;
}


.imagen-diferenciales {

    width: 60%;
}

.video {

    width: 560px;
    margin: 1em auto;

}

sobre estas dos hojas no logro que funcione el first-child ya revise que no tenga mas items y tambien revise si habia algun tema de cascada pero tampoco encontre algun error espero me puedan ayudar

por Juan David Villegas Pinto
| 82.3k xp | 5 posts

Eso es raro, he probado el código en mi editor y funciona como debería. Podrías ingresar a inspeccionar elemento y seleccionar aquel primer ítem, allí verifica si el estilo existe o si está subrayado, puede ser que otro estilo esté aplicando sobre él, además puedes intentar agregar la propiedad !important despues de bold

por Carlos Alberto Cruz Olazo
| 55.3k xp | 21 posts
Ventas

https://share.icloud.com/photos/095gGE6KIpd1NlGmIStmF8oJw

(Replicacion del error)

No puedo subir el video directamente asi que les comparto en enlace donde actualizo la pagina y no parece funcionar. Ojala me puedan ayudar no entiendo que pasa

por Erick Waldemar Conquera Rueda
| 170.4k xp | 81 posts

No se si ya lo has resuelto, pero si marca en negrilla el dato solicitado.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

por IsraelBasurtoSanchez
| 141.7k xp | 85 posts
Estudiante

Html

<!DOCTYPE html>

<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Barberia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>

<body>

    <header>
        <div class="caja">
            <h1><img src="imagenes/logo.png"></h1>
            <nav>
                <ul>
                    <li><a href="www.whatsapp.com" class="bi bi-whatsapp"></a></li>
                    <li><a href="www.facebook.com" class="bi bi-facebook"></a></li>
                    <li><a href="www.instagram.com" class="bi bi-instagram"></a></li>
                    <li><a href="index.html">Home</a> </li>
                    <li><a href="productos.html">Productos</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <img class="banner" src="banner/banner.jpg">

    <main>
        <section class="principal">

            <h2 class="titulo-principal">Sobre la Barbería Alura</h2>
            <img class="utensilios" src="/imagenes/utensilios.jpg" alt="Utensilios de un barbero">


            <p>Ubicada en el corazón de la ciudad, la Barbería Alura trae para el mercado lo que hay de mejor para su
                cabello y barba. Fundada en 2020, la <strong> Barbería Alura</strong>ya es destaque en la ciudad y
                conquista nuevos clientes diariamente.</p>

            <p id="mision"><em>Nuestra misión es:<strong>"Proporcionar autoestima y calidad de vida a nuestros
                        clientes"</strong>.</em></p>

            <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el
                mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un
                padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p>

        </section>

        <section class="mapa">
            <h3 class="titulo-principal">Nuestra Ubicacion</h3>
            <p>Nuestro establecimiento esta ubicado en el corazon de la ciudad</p>
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101256.53643541217!2d-99.21664439115042!3d19.41376482959087!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d201f60a8f816b%3A0xca7e9b8e9149aac2!2sGoogle%20M%C3%A9xico!5e0!3m2!1ses!2smx!4v1683339725957!5m2!1ses!2smx"
                width="1000" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>

        </section>


        <section class="diferenciales">

            <h3 class="titulo-principal">Diferenciales</h3>

            <div class="contenido-diferenciales">
                <ul class="lista-diferenciales">
                    <li class="items">Atencion personalizada a los clientes</li>
                    <li class="items">Espacio diferenciado</li>
                    <li class="items">Localizacion</li>
                    <li class="items">Profesionales calificados</li>
                    <li class="items">Puntualidad</li>
                    <li class="items">Limpieza</li>
                </ul><img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">

            </div>

        </section>

        <div class="video">

            <iframe width="560" height="315" src="https://www.youtube.com/embed/5pOg4LuS-cI"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>

    </main>

    <footer>
        <img src="imagenes/logo-blanco.png" alt="">
        <p class="copyright">&copy Copyright Barberia Alura - 2023</p>
    </footer>

</body>

</html>
solución!
por IsraelBasurtoSanchez
| 141.7k xp | 85 posts
Estudiante

Css

body {
    font-family: 'Montserrat', sans-serif;
}

header {
    background-color: #BBBBBB;
    padding: 20px 0;
}

.caja {
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #c78c19;
    text-decoration: underline;
}

.productos {
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}

.productos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.productos li:hover {
    border-color: #c78c19;
}

.productos li:active {
    border-color: #088c19;
}

.productos h2 {
    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2 {
    font-size: 33px;
}

.producto-descripcion {
    font-size: 18px;
}

.producto-precio {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

footer {
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 40px;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px;
}

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}

form label,
form legend {
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padron {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

.enviar {
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

.enviar:hover {
    background: darkorange;
    transform: scale(1.2);
}

table {
    margin: 40px 40px;
}

thead {
    background: #555555;
    color: white;
    font-weight: bold;
}

td,
th {
    border: 1px solid #000000;
    padding: 8px 15px;
}

/*Aqui inicia Css para nuestra home*/

.banner {
    width: 100%;
}

.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.principal p {
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa {
    padding: 3em 0;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.contenido-diferenciales {
    width: 640px;
    margin: 0 auto;
}

.lista-diferenciales {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.items {
    line-height: 1.5;
}
.items.items:first-child{
    font-weight: bold;
}

.imagen-diferenciales {
    width: 60%;
}

.video {
    width: 560px;
    margin: 1em auto;
}

te dejo mi código funciona al 100% hasta lo ultimo que llevo....

por Carlos Alberto Cruz Olazo
| 55.3k xp | 21 posts
Ventas

muchas gracias a todos al parecer si funciona coteje con un codigo que alguien subio y esta igual obsevando bien si parece pintar pero no lo hace con la intensidad que sale en el video del instructor eso sigo sin entender por que o talvez es mi monitor pero es la primera vez que me pasa y en ejercicios anteriores tambien pintamos y no me paso asi entonces sigo algo desconcertado

por Franco Santos Tadeo Jeri
| 103.4k xp | 26 posts
Ingeniería de Sistemas e Informática

Carlos, ntp, en realidad es por la fuente de texto Monserrat, para que verifiques quita del body "css" la fuente de texto y valida si se pone en negrita.