Button ausblenden mit display: none

  • Hallo,


    ich versuche einen Button auszublenden,
    doch mir gelingt es nicht, den richtigen Code zu finden.


    Dies ist der Quelltext:
    <button type="button" class="uk-margin-top uk-button uk-button-large uk-button-danger"><i class="uk-icon-ban uk-margin-small-right"></i> RUF MICH AN!</button>


    Mit welcher Eingabe muss ich "page-element" ersetzten, damit der Button verschwindet?


    .page-element {


    display: none;


    }



    Vielen Dank für Eure Hilfe!

  • Hallo miratalu,


    . ist der css identifier für das class Attribut.

    Also theoretisch in deinem Fall

    CSS
    .uk-margin-top uk-button uk-button-large uk-button-danger {
        display: none;
    }

    aber das Problem sind meiner Meinung nach die Leerzeichen!

    Entweder musst du das class Attribut ändern oder einfach dem Button eine id geben und ihn darüber identifizieren.

    Also so:

    HTML
    <button type="button" class="uk-margin-top uk-button uk-button-large uk-button-danger" id="DeineID"><i class="uk-icon-ban uk-margin-small-right"></i> RUF MICH AN!</button>
    CSS
    #DeineID {
        display: none;
    }

    Viele Grüße


    Justus

  • Dieses CSS:

    Code
    .uk-margin-top uk-button uk-button-large uk-button-danger {
        display: none;
    }

    wird nicht funktionieren, denn es würde bedeuten:
    Das Element mit dem Namen "uk-button-danger" (also nicht der Klasse) ist ein Nachfahre des Elementes mit dem Namen "uk-button-large" und dieses ist ein Nachfahre des Elementes mit dem Namen "uk-button" und dieses ..., siehe hier:

    https://wiki.selfhtml.org/wiki…ator/Nachfahrenkombinator

    Richtig wäre dieses:

    Code
    .uk-margin-top.uk-button.uk-button-large.uk-button-danger {
        display: none;
    }

    Allerdings ist es auf jedenfalls empfehlenswert, einen Selektor zu verwenden, der spezifischer ist als diese Klassen, wie von Justus vorgeschlagen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!