How to remove property inherited by the component?

Asked

Viewed 385 times

1

When placing a side navigation icon, I noticed that a piece of it "leaked" out of the expected, which made it behave visually strange in the animation. I put a background-color: red for easy viewing:

área do ícone vazando para fora do desejado

But when inspecting the page element, I realized that if I removed a CSS property from the tag <i> he behaves in the way desired:

ícone se comportando da forma desejada propriedade <code>height</code> desmarcada

but if I put height: 0 in my CSS animation occurs in another strange way, besides the element apparently having no more "background":

ícone se comportando de forma estranha

How can I override the behavior of a single property inherited from tags and higher classes in CSS without losing the others, who can be useful?

Structure of the DOM:

<body>
    <header class="navbar-fixed">
        <nav class="nav-wrapper">
            <div class="row">
                <div class="left col 2s">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </nav>
    </header>


    <!-- conteúdo da página -->
</body>
html css html5 css3 property

  • You can put an example, with code?

  • I put the structure of DOM, but I don’t know what else I could put to help

  • basically, the materialize-css has a CSS ready for all elements <i> located within a tag <nav>, but I want to remove one of the defined properties and use the full page pattern

  • 1

    Maybe overwrite the CSS class. Suppose there is a class called .a { height: 100px; }, declare in another CSS file the same class by changing its properties, e.g..: .a { heigth: unset }. The important thing is that your change is loaded after the original class.

  • @Marcelovismari was just that. Put in an answer so I can close the topic ;)

  • @Arthursiqueira also puts the code of that css in the question. In order to create an executable code snippet.

Show 1 more comment

1 answer

2


You can override CSS classes to change the desired properties. Suppose there is a class called .a { height: 100px; }, declare in another CSS file the same class by changing its properties, e.g..: .a { heigth: unset }. The important thing is that your change is loaded after the original class.

Browser other questions tagged html css html5 css3 property

You are not signed in. Login or sign up in order to post.