Estoy trabajando en un proyecto angular, donde quiero eliminar el estilo del elemento principal con la ayuda del elemento secundario, porque el elemento secundario está basado en condiciones. Tenga en cuenta que el elemento principal tiene un estilo en línea
mi código es algo como esto
<form style="background-color: red; padding: 5px" class="my-form"> <div> <div> <button class="my-btn">click me</button> </div> </div>CSS
.my-btn { color: #fff; background-color: #000; border: none; outline: none; padding: 5px 12px; cursor: pointer; }Si bien un elemento secundario no puede influir directamente en el estilo de un elemento principal, hay algunas cosas que puede hacer, pero si estas ideas son útiles depende exactamente de lo que quiera hacer.
Tomando el código dado en la pregunta, es posible hacer que parezca que el color de fondo del formulario ha cambiado al colocar un pseudo elemento en el btn que está posicionado absolutamente y con un tamaño relativo al formulario, no al btn. Las variables CSS se pueden configurar en el elemento btn y luego recogerlas en su pseudo elemento, como el color de fondo, por ejemplo.
.my-form { position: relative; display: inline-block; z-index: -2; } .my-btn { color: #fff; background-color: #000; border: none; outline: none; padding: 5px 12px; cursor: pointer; } .my-btn::before { content: ''; background-color: var(--bg); display: inline-block; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: -1; } <form style="background-color: red; padding: 5px" class="my-form"> <div> <div> <button class="my-btn" style="--bg: blue;">click me</button> </div> </div>