Opklaring af css

Det er en attribute selector (specifikation)

Det er lidt underligt de bruger begge da *= er nok.

*= betyder at attributen skal bare indeholde den værdi der er angivet, ^= betyder at attributen skal starte med den værdi som er angivet (men den indeholder den alligevel så *= rammer stadig hvis den starter med værdien)

Du kan læse meget mere om det her, hvor der er andre eksempler på nogle af de andre selects som findes.

Tit kan du se sådan et select blive brugt til at ramme alle inputs af fx. typen checkbox - input[type="checkbox"] så du har select[attribute="værdi"]

At .secTop's class attribute starter eller indeholder "triangle-" udover at den jo også skal have secTop fordi det er det du selecter.

den selector kan bruges til elementer ala

 <ul class="secTop">
     <li class="triangle-001">...</li>
     <li class="square-001">...</li>
     <li class="circle-001">...</li>
     <li class="triangle-002">...</li>
     <li class="square-002">...</li>
     <li class="circle-002">...</li>
     <li class="triangle-003">...</li>
     <li class="square-003">...</li>
     <li class="circle-003">...</li>
 </ul>

Så i det her tilfælde vil det betyde at classen for .secTop?

arh okay, så det er children for .secTop som indeholder triangle som class det gælder?

Det er descendants (ikke children) af elementer med klassen "secTop" hvis class skal indeholde "triangle-". Det er descendants og ikke children af samme grund som ".secTop .descendant" matcher descendants af elementer med klassen "secTop" som har klassen "descendant" - ergo der er mellemrum og ingen ">".

Det kan bruges i det tilfælde dan beskriver.