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
    1. .uk-margin-top uk-button uk-button-large uk-button-danger {
    2.     display: none;
    3. }

    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
    1. <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
    1. #DeineID {
    2.     display: none;
    3. }

    Viele Grüße


    Justus

  • Dieses CSS:

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

    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
    1. .uk-margin-top.uk-button.uk-button-large.uk-button-danger {
    2. display: none;
    3. }

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