CSS-Anweisung wird übernommen, obwohl ganz andere ID

[Little Tester]

Hier zunächst einmal ein Screenshot:
checkbox_verschoben.png
Wie man sieht sind die Checkboxen innerhalb der Zelle nach unten verschoben.
Ursächlich ist eine CSS-Anweisung für einen ganz anderen Bereich wie ich dann durch die Analyse festgestellt habe. Ich verstehe das nicht.
Anbei mal der entsprechende HTML-Ausschnitt:

<div id="containerOverview">
        <div id="containerSoftwareVersionOverwiew">
            <h5>
                <i class="bi bi-box2-fill"></i> Vorhandene Software</h5>
            <div class="headlineseparator">
            </div>
            <table>
                <thead>
                    <tr>
                        <th>
                        </th>
                        <th>Software
                            <i class="bi bi-caret-down-fill"></i>
                            <i class="bi bi-caret-up-fill"></i>
                        </th>
                        <th>
                            Version
                            <i class="bi bi-caret-down-fill"></i>
                            <i class="bi bi-caret-up-fill"></i>    
                        </th>
                        <th>
                            Zuletzt geprüft
                            <i class="bi bi-caret-down-fill"></i>
                            <i class="bi bi-caret-up-fill"></i>
                        </th>
                        <th>
                            Bemerkungen
                            <i class="bi bi-caret-down-fill"></i>
                            <i class="bi bi-caret-up-fill"></i>
                        </th>    
                    </tr>
                </thead>
                <tbody>
                    <?php
                        foreach ($readAllSoftwareVersion AS $softwareVersion):
                    ?>
                    <tr>
                        <td>
                            <form action="softwareVersionDelete" method="post">
                                <input type="checkbox" name="mark" value="3">
                            </form>
                        </td>
                        [...]

Und hier der CSS-Teil der für die Verschiebung verantwortlich ist:

#containerAddCar form label, input, select {
    margin-left: 10px;
    margin-top: 10px; // <-- Schuldig
    display: block;
}

Die Anweisung bezieht sich doch auf die ID "containerAddCar". Was schießt das dann plötzlich in der ID "containerSoftwareVersionOverwiew" quer?

[tk1234]

Hier zunächst einmal ein Screenshot:

… der nicht zu sehen ist - Bilder hier hochladen funktioniert nicht mehr seit das Forum mit Werbung vollgeballert wurde (bzw. hochladen geht, anzeigen aber nicht).

Die Anweisung bezieht sich doch auf die ID "containerAddCar".

Jein. Der Block gilt für alle label unterhalb eines Formulars, unterhalb eines Elements mit der ID containerAddCar - aber eben auch für alle input- und select-Elemente, egal welche Elternelemente sie haben …

[Little Tester]

OK, stimmt. Wenn der Code so aussieht klappt es:

#containerAddCar form label,
#containerAddCar form input,
#containerAddCar form select {
    margin-left: 10px;
    margin-top: 10px;
    display: block;
}

Wie überaus aufwändig und redundant. Kann man das auch vereinfachen bzw. schöner zusammen fassen?

[tk1234]

Wie überaus aufwändig und redundant. Kann man das auch vereinfachen bzw. schöner zusammen fassen?

Der Syntax ist halt so - vereinfachen lässt sich das nur wenn du z.B. less verwendest, dann reicht:

#containerAddCar form {
    label, input, select {
        margin-left: 10px;
        margin-top: 10px;
        display: block;
    }
}

(es gibt z.B. für VS Code auch ein Plugin dass aus dem less-Code automatisch css-Dateien erzeugt)