WinFuture-Forum.de: CSS: Selektoren kombinieren - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

CSS: Selektoren kombinieren

#1 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 787
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 16. Mai 2018 - 13:15

Hallo zusammen,

ich habe in einem Online-Shop eine div Klasse, die h2 und h3 Elemente enthält.
Nun möchte ich, dass nur diese h2 und h3 Elemente andere styles bekommen.
Alles andere soll so bleiben wie bisher gestyled.
Wie muss ich den Code nun eingeben? Ich habe so ziemlich alles mit , + ~ und !important probiert. Im besten Fall ändern sich alle h2 und h3, aber es soll nur die in diesem einen Container betreffen

.eigene-div h2,h3{

color: #999;

}


0

Anzeige

#2 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 12.813
  • Beigetreten: 08. April 06
  • Reputation: 416

geschrieben 16. Mai 2018 - 13:35

Wenn innerhalb deiner ".eigene-div" bestimmte HTML-Elemente anders angezeigt werden sollen ist das so:

.eigene-div:h2, .eigene-div:h3, .eigene-div:wattweissich {
was-alles-passieren-soll
}



Also grob:
DIV deklartieren, Doppelpunkt, HTML-Element,[KOMMA, LEERZEICHEN]

Weitere Elemente immer mit diesem Schema dort anhängen. ist fummelig aber ja.

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 16. Mai 2018 - 13:35

Eingefügtes Bild
0

#3 Mitglied ist offline   Binabik 

  • Gruppe: aktive Mitglieder
  • Beiträge: 207
  • Beigetreten: 23. Oktober 07
  • Reputation: 36

geschrieben 16. Mai 2018 - 13:49

Meiner Meinung stimmt das von SdH bis auf den Doppelpunkt, der kommt weg. Also

.eigene-div h2, .eigene-div h3
{
  color: #999;
}

0

#4 Mitglied ist offline   Andrew0 

  • Gruppe: aktive Mitglieder
  • Beiträge: 787
  • Beigetreten: 24. Juli 04
  • Reputation: 0

geschrieben 16. Mai 2018 - 14:00

Beitrag anzeigenZitat (Binabik: 16. Mai 2018 - 13:49)

Meiner Meinung stimmt das von SdH bis auf den Doppelpunkt, der kommt weg. Also

.eigene-div h2, .eigene-div h3
{
  color: #999;
}



Perfekt, danke! Damit klappt es :)
0

#5 Mitglied ist offline   RalphS 

  • Gruppe: VIP Mitglieder
  • Beiträge: 8.047
  • Beigetreten: 20. Juli 07
  • Reputation: 896

geschrieben 16. Mai 2018 - 18:07

Richtig, die Doppelpunkte sind für Pseudoselektoren und Funktionen und sonstwas, was es nicht "real" gibt (und auch nicht geben kann). p:first-line zum Bleistift wird die erste Zeile im Paragraphen formatieren, egal was da steht, auch dann, wenn man da was ändert und plötzlich wegen Änderungen der Fenstergröße mehr oder weniger dort steht. <element>:before und <element>:after erlaubt es, was vor bzw nach dem Element einzufügen. Und die allseits beliebten a:hover, a:active und a:visited, die einen besuchte Links, aktive Links und "überfahrene" Links auswählen.

Für Subselektoren:

div p

Man hat ein Div, und IRGENDWO in diesem DIV befindet sich ein oder mehrere P. Die werden angesprochen.

div > p
Man hat ein DIV, und DIREKT DORT DRIN ist das oder die P. Die werden angesprochen. Hat man aber ein DIV und da drin befindet sich noch eine Tabelle und dort ist das P drin, dann trifft das nicht zu.

div > p:first-child, div > p:last-child greift nur das erste oder letzte p direkt im DIV. Ohne das > wieder das erste oder letzte P, was überhaupt da drin steckt.

Und weils so schön war:

a[href]:hover greift alle Ankertags, die irgendwo hinverweisen (nicht die Ankerziele) und formatiert die dann, wenn man sie übermaust.


Inzwischen eine sehr gute Referenz, auch wenn das nicht immer so war, ist w3schools.com.
"If you give a man a fish he is hungry again in an hour. If you teach him to catch a fish you do him a good turn."-- Anne Isabella Thackeray Ritchie

Eingefügtes Bild
Eingefügtes Bild
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0