ravetti: CSS-Selektoren für Attribute

SELF-Forum

CSS-Selektoren für Attribute

ravetti
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich bin mir nicht sicher, ob die Überschrift richtig ist weshalb ich google vielleicht auch die falschen Fragen stellen. Nun denn, es geht um folgendes:

In einer Navigation möchte ich die Links individuell einfügen, weshalb ich mit

.navi_1 {margin-right: 20px;}  
.navi_2 {margin-right: 23px;}  
.navi_3 {margin-right: 26px;}

den Abstand nach rechts bestimme.

Es sollen nun aber, und das ist das Problem, alle .navi_{Zahl} den gleichen Abstand nach oben und unten haben, also margin: 5px 5px;. Wie muss besagt .navi_{Zahl} richtig geschrieben werden?

Vielen Dank für einen Hinweis,
Ravetti

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS-Selektoren für Attribute

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Es sollen nun aber, und das ist das Problem, alle .navi_{Zahl} den gleichen Abstand nach oben und unten haben, also margin: 5px 5px;. Wie muss besagt .navi_{Zahl} richtig geschrieben werden?

    garnicht - nutze mehrere Klassen oder den Nachfahren/Kindselektor um von einem Elternelement abwärts alle Gemeinsamkeiten gleichzeitig zu formatieren.

    Ich wage aber zu behaupten, dass dein Konzept möglicherweise einen Denkfehler enthält - kannst du bitte beschreiben (oder besser zeigen), was du eigentlich vorhast - jeden Menüpunkt einzeln angreifen ist idR. etwas unsinnig (sofern man sie nicht z.B. in einem Bogen, einer Treppe oder vergleichbares anordnen will).

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS-Selektoren für Attribute

      ravetti
      – Informationen zu den Bewertungsregeln

      Die Navigation soll sich an einer schrägen Linie orientieren so wie hier Beispiel dabei werden die besagten navi_1 usw. werden vom CMS erzeugt.

      In meinem Posting habe ich etwas falsch geschrieben. Natürlich muss es heissen .navi_{jedebeliebigeZahl}

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS-Selektoren für Attribute

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Die Navigation soll sich an einer schrägen Linie orientieren so wie hier Beispiel dabei werden die besagten navi_1 usw. werden vom CMS erzeugt.

        Warum kann das CMS dann nicht gleich das passende CSS dazu erzeugen?

        In meinem Posting habe ich etwas falsch geschrieben. Natürlich muss es heissen .navi_{jedebeliebigeZahl}

        Geht trotzdem nicht.

        :nth-child() ist aber eine Möglichkeit.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. CSS-Selektoren für Attribute

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@ravetti:

    nuqneH

    Es sollen nun aber, und das ist das Problem, alle .navi_{Zahl} den gleichen Abstand nach oben und unten haben, also margin: 5px 5px;.

    Zwei Möglichkeiten:

    (1) Du listest alle Klassenselektoren auf [CSS2 §5.2.1]: .navi_1, .navi_2, .navi_3 { margin: 5px 5px }

    Eher nicht zu empfehlen: wartungsunfreundlich (Aufwand, wenn noch mehr Menüpunkte dazukommen). Und es geht besser:

    (2) Die Liste (dein Menü ist doch eine Liste, oder?) hat sicher eine ID ("nav"?) Dann per Nachfahrenselektor: #nav li { margin: 5px 5px }

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln