css - quitar padding bootstrap 4

Cancelar una declaración de CSS

Question

¿Es posible tener una regla de CSS que básicamente "deshaga" una regla anterior?

Un ejemplo:

<blockquote>
    some text <em>more text</em> other text
</blockquote>

y digamos que hay este CSS:

blockquote {
    color: red;
}

... pero quiero que <em> siga siendo el color de texto normal (que puede que no sepa necesariamente).

Básicamente, ¿habría alguna manera de hacer algo como esto?

blockquote em {
    color: inherit-from-blockquote''s-parent
}

Editar: El código en el que estoy tratando de hacer que esto funcione en realidad es un poco más complicado. Quizás esto lo explique mejor:

This text should be *some unknown colour*
<ul>
    <li>This text should be BLUE
        <ul>
            <li>Same as outside the UL</li>
            <li>Same as outside the UL</li>
        </ul>
    </li>
</ul>

ul {
    color: blue;
}
ul ul {
    color: ???;
}

Answer 1

Si puede cambiar su html puede probar

<li><span>This text should be BLUE</span>
    <ul>
        <li>Same as outside the UL</li>
        <li>Same as outside the UL</li>
    </ul>
</li>

y el estilo

li span{
    color: blue;
}

EDITAR de otra manera para lograr esto sin la etiqueta de span adicional:

Si suponemos que tenemos una clase de estilo (o cualquier otro selector) que define al padre del ul externo. Podemos modificar el CSS así:

.parentStyle,
.parentStyle li li{
     color:red;
}
li{
     color:blue;
}

Answer 2

Úselo para asegurarse de que la herencia anule cualquier otra cosa que haya estado configurando el color:

blockquote em {
    color: inherit !important;
}

Answer 3

Con CSS solo, no puede referirse al padre de un padre.

Lo que puedes hacer es probar una combinación de selectores y marcadores CSS específicos para que aparezca el efecto deseado.

<td>
  This is the enclosing element.
  <ul>
    <li>This is the first level UL, direct child of TD
      <ul>
        <li>This is the second level UL</li>
        <li>Same as outside the UL</li>
      </ul>
    </li>
  </ul>
</td>

CSS:

td > ul
  color: blue; /* this affects the "direct child" UL only */
}

Limitaría la profundidad de la herencia de estilo a un nivel, por lo tanto, el UL interno no tiene estilo en lo que respecta al color y obtiene su configuración del texto adjunto.

Lea más en el Selector de elementos secundarios de CSS y tenga en cuenta que los navegadores más antiguos pueden tener sus peculiaridades.

EDITAR

Para Internet Explorer 6, el selector de elementos secundarios se puede simular en cierta medida. Asegúrese de abrocharse los cinturones de seguridad (comentarios condicionales o similares) antes de usar esto:

td ul {
  color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black");
}

Esto supone "negro" como color externo. Si este valor de color está sujeto a cambios, me temo que no tienes suerte. A menos que pueda definir una expression() que pueda obtener el valor de color del contexto (por ejemplo, verificando otras propiedades de los elementos principales). O te rindes y usas un marco JS, como alguien más ya ha sugerido.

La solución débil sin tener que usar JS por supuesto sería:

td ul.first {
  color: blue;
}

Pero puedo ver por qué quieres evitar eso.

Answer 4

Mi CSS está un poco oxidado, pero esto debería funcionar:

blockquote {
    color: red;
}

blockquote em {
    color: inherit;
}

Está estableciendo blockquotes en rojo, pero todos los <em>''s que están contenidos en una blockquote deben heredar ... hmmm, ¿deberían heredar del texto circundante, o de la blockquote?

Si lo anterior no funciona como lo desea, entonces no hay forma de hacerlo con el marcado actual, creo. Debería trabajar con marcado adicional o establecer el color explícitamente, por ejemplo

blockquote em {
        color: Purple;
} 

Answer 5

Ok, el texto adicional con el ejemplo aclara mucho la pregunta. Y temo que lo que quieres no sea posible.

Si conoce el "color desconocido", puede, por supuesto, repetir el color. Pero creo que CSS necesita algún mecanismo para agregar variables o referencias.

Entonces tienes que apegarte a lo engorroso:

ul {
  color: blue;
}
li ul {
  color: sameenvironment;  /* Sorry but you have to add the specific colour here */
}

Answer 6

Renunciar y utilizar un fragmento de javascript para detectar el estilo del padre y configurarlo? :)

Answer 7

En lugar de tratar de obligar a un selector a heredar el color de fuente de sus abuelos, le sugiero que otorgue al selector y a sus abuelos una declaración compartida para el color de la fuente.

Tomando el ejemplo de blockquote, asumiendo que el cuerpo es el abuelo:

body, blockquote em {
       color:[whatever];
}


blockquote {
       color:red;
}

Y en el caso de las listas desordenadas, sería:

body, ul ul {
       color:[whatever];
}


ul {
       color:blue;
}

Answer 8

Yo también tenía esta pregunta, pero después de echar un vistazo a las otras respuestas me di cuenta,

    body {
        color : initial;
    }

IE no es compatible con esto actualmente y Gecko requiere una -moz-initial, creo.

    body {
        color : unset;
    }

Este no es tan compatible en este momento. Solo pensé en compartir mi respuesta con esto para cualquier otra persona que piense sobre esto.