¿se puede añadir excepciones en css?

publicado por: Anonymous

introducir la descripción de la imagen aquí

_x000D_

_x000D_

p {_x000D_
 	font-family: Arial, Helvetica, Sans-serif;_x000D_
  }_x000D_
 li { /*font-family: Arial, Helvetica, Sans-serif;*/_x000D_
 	font-style: oblique; }

_x000D_

_x000D_

_x000D_

introducir la descripción de la imagen aquí

como ven mi menu que tiene la etiqueta

  • asi también en la segunda imagen se puede observar al final una lista puntuada que está en oblicuas, ya que este también tiene la etiqueta
  • . A mi menu le quiero agregar una clase a las etiquetas
  • _x000D_

    _x000D_

    <nav>_x000D_
      <ul><li>_x000D_
    <div class="contenedor">_x000D_
         <a href="#" class="open">INICIO</a>_x000D_
      </div>_x000D_
    </li>_x000D_
        <li><div class="contenedor">_x000D_
          <a href="#openmodal1" class="open"> ACERCA DE </a>_x000D_
          <section id="openmodal1" class="modalDialog">_x000D_
            <section class="modal">_x000D_
              <a href="#close" class="close"> X </a>_x000D_
              <h2 class="diferencia"> acerca de</h2>_x000D_
              <p class="diferente">Este sitio abarca tutoriales para dar soluciones destinadas a resolver dudas acerca de todo tipo de ideas útiles para el internauta</p>_x000D_
            </section>_x000D_
          </section>_x000D_
        </div></li>_x000D_
        <li><div class="contenedor">_x000D_
          <a href="#openmodal2" class="open">POLITICA DE PRIVACIDAD</a>_x000D_
          <section id="openmodal2" class="modalDialog">_x000D_
            <section class="modal">_x000D_
              <a href="#close" class="close"> X </a>_x000D_
              <h2 class="diferencia"> politica de privacidad</h2>_x000D_
              <p class="diferente">Esta permitido compartir todo el contenido de este sitio, más no está permitido copiar cual fiel copia, para usarlo en el desarrollo de otro sitio web, todo o parte del contenido de mi sitio web. En cualquier caso que se inserte cualquier parte del contenido en otro sitio web se deberá hacer referencia de que se está compartiendo el contenido y de forma notoria que dicho contenido es de mi autoria: Susana Alexadra Loor García y de que se extrajo de: <a href="https://alexandrawp.herokuapp.com">https://alexandrawp.herokuapp.com/</a> Por lo tanto se establece que se respetará este sitio web como propiedad de la autora, y nadie se podrá adujudicar a su autoria todo del contenido de dicho sitio</p>_x000D_
            </section>_x000D_
          </section>_x000D_
        </div></li>_x000D_
        <li><div class="contenedor">_x000D_
          <a href="#openmodal3" class="open"> CONTACTO</a>_x000D_
          <section id="openmodal3" class="modalDialog">_x000D_
            <section class="modal">_x000D_
              <a href="#close" class="close"> X </a>_x000D_
              <h2 class="diferencia"> CONTACTO</h2>_x000D_
              <p class="diferente">Comunicate con nosotros a este correo [email protected]</p>_x000D_
            </section>_x000D_
          </section>_x000D_
        </div> </li>_x000D_
        <li>_x000D_
           <div class="contenedor">_x000D_
            <a target="_blank" class="open" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a>_x000D_
           </div>_x000D_
     </li>_x000D_
      </ul>_x000D_
          </nav>

    _x000D_

    _x000D_

    _x000D_

    para diferenciarlas de estas

    _x000D_

    _x000D_

    <ul>_x000D_
    <li>simplemente arrastran hacia afuera</li></ul><br><p align="justify"> Para_x000D_
    volver a convertir esta pestaña en una_x000D_
    ventana</p><br> <ul>_x000D_
    <li>pues tienen que recordar que_x000D_
    tienen que tener abierta la otra ventana_x000D_
    aquí sí va a poder arrastrar hacia_x000D_
    arriba y soltar</li>_x000D_
    <li>otra forma de hacerlo_x000D_
    una vez que ustedes tengan creada su_x000D_
    ventana_x000D_
    es haciendo clic en este botón de en medio de maximizar</li>_x000D_
    <li>la ventana puede estar superpuestas no_x000D_
    es necesario bajar la puede estar un_x000D_
    poco más grande y simplemente arrastran_x000D_
    esta ventana hacia las otras pestañas</li></ul>

    _x000D_

    _x000D_

    _x000D_

    entonces yo quiero que si a mi menu le pongo class=excepcion. No se como poner en css para que todas las etiquetas

  • tengan oblicuas, excepto la clase excelpcion

    solución

    Si existen las excepciones en css, es un selector conocido como :not(.clase), pero no te lo recomiendo para tu caso. Igual te muestro como funciona.

    Digamos tienes 2 listas donde en una li son obliquas por defecto y en la otra no:

    <ul>
      <li> Algo </li>
      <li> Algo </li>
    </ul>
    
    <ul class="no-oblicuas">
      <li> Algo </li>
      <li> Algo </li>
    </ul>
    

    En el css, sería algo así

    ul:not(no-oblicuas) li{
      font-style: italic;
    }
    

    De esa manera le indicamos que todos los li por defecto serán italicas, excepto la que tenga la clase no-oblicuas.

    Pero realmente te recomiendo es el uso de las multiclases, una para cuando necesites itálicas en las listas y otra cuando no, algo así:

    <ul class="lista italica">
      <li> Algo </li>
      <li> Algo </li>
    </ul>
    
    <ul class="lista negrita">
      <li> Algo </li>
      <li> Algo </li>
    </ul>
    

    Y en el css:

    .lista{
      font-style: normal;
    }
    
    .lista.itálica li{
      font-style: italic;
    }
    
    .lista.negrita li{
      font-weight: bold;
    }
    

    Esto aplica para usarse con cualquier etiquetas, no necesariamente listas, pueden ser p, div, span, etc.

    Pero es una recomendación, tomando en cuenta las buenas prácticas de maquetar en internet, no es una norma, ya depende de ti.

    Respondido por: Anonymous
  • Leave a Reply

    Your email address will not be published. Required fields are marked *