Ankündigung

Einklappen
Keine Ankündigung bisher.

css Selektor mit Klasse und Child

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    css Selektor mit Klasse und Child

    Hallo
    Ich habe 2 Probleme und hoffe hier auf CSS-Lösungen.
    1. Ich möchte das erste Element mit der Klasse X ansprechen.
    HTML-Code:
    div.item.active:first-child .prev
div.item.active:last-child .next
    Das funktioniert natürlich nicht, da :first-child eben nur auf Element geht und nicht auf Klassen o.Ä.
    Vielleicht hat jemand eine Idee, wie man das lösen könnte.

    2. Ich möchte alle Elemente zwischen X und :hover ansprechen
    In meinem Beispiel wäre das alle .element zwischen .element.current und .element:hover
    Ich weis, dass es die Möglichkeit gibt, Elemente auf gleicher Ebene anzusprechen, das geht hier aber nicht, da die Elemente unterschiedliche Parents haben.

    Hier ein Beispiel
    HTML-Code:
    <!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
    <style>
        .outer{
            width: 100%;
            display: flex;
        }
        .outer2{
            width: 100%;
            display: flex;
            margin-top: 100px;
        }
        .item{
            width: 49%;
            border: 1px solid;
            display: block;
        }
        .header{
            display: flex;
            justify-content: space-between;
        }
        .item:not(.active) .control{
            visibility: hidden;
        }

        .item2{
            width: 100%;
            border: 1px solid;
            display: flex;
        }
        .element{
            width: 10%;
            height: 20px;
            border: 1px solid;
            display: block;
        }
        .element.current {
            background-color: #ccc;
        }
        .element:hover{
            background-color: #7ebd38;
        }

    </style>

</head>
<body>
    <div class="outer">
        <div class="item">
            <div class="header">
                <a class="control prev">Prev</a>
                <h3>Header 1</h3>
                <a class="control next">Next</a>
            </div>
            <div class="content"></div>
        </div>
        <div class="item active">
            <div class="header">
                <a class="control prev">Prev</a>
                <h3>Header 2</h3>
                <a class="control next">Next</a>
            </div>
            <div class="content"></div>
        </div>
        <div class="item active">
            <div class="header">
                <a class="control prev">Prev</a>
                <h3>Header 3</h3>
                <a class="control next">Next</a>
            </div>
            <div class="content"></div>
        </div>
        <div class="item">
            <div class="header">
                <a class="control prev">Prev</a>
                <h3>Header 4</h3>
                <a class="control next">Next</a>
            </div>
            <div class="content"></div>
        </div>
    </div>
<div class="outer2">
    <div class="item2">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element current"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <div class="item2">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <div class="item2">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <div class="item2">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
</div>
</body>
</html>
    Möchte das nur ungerne mit JS lösen.
    Danke
    Der Unterschied zwischen dem richtigen Wort und dem beinahe richtigen ist derselbe Unterschied wie zwischen dem Blitz und einem Glühwürmchen.
    Stichworte: -
  • #2
    Eine kurze Google-Suche ergibt:

    https://stackoverflow.com/a/8539107

    Kommentar

    • #3
      Zitat von SteiniKeule
      Das funktioniert natürlich nicht, da :first-child eben nur auf Element geht und nicht auf Klassen o.Ä.
      Wenn das so gemeint ist, wie ich es lese, ist das schon mal falsch.

      Frage dazu: Wie erhält Dein Element denn die Klasse current? In dem Prozessschritt kannst Du doch allen anderen eine zusätzliche Klasse, wie bspw. choice geben, dann wäre das relativ simpel, weil Du Dein hover nur auf den Elementen anwenden bräuchtest, die nicht current sind.

      ​​​​​​​Ansonsten hilft die Lösung, die Dir bereits verlinkt wurde.
      Competence-Center -> Enjoy the Informatrix
      PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

      Kommentar

      Vorherige Weiter
      Lädt...
      X