CSS stylowanie listy

pytanie zadane 10 kwietnia 2018 w HTML i CSS przez TerryCrow Początkujący (340 p.)

Cześć, mam krótkie pytanie dotyczące stylowania listy w CSS. Potrzebuję Ustawić wszystkim elementom wszystkich list wysokość na 50px i szerokość na 300px i zastanawiam się jak zrobić to najszybszym sposobem żeby nie dodawać do każdego elementu osobnego ID. To na pewno prosta sprawa ale nie bardzo mogę sobie z tym poradzić żeby te wartości odnosiły się do wszystkich elementów wszystkich list. Poniżej wklejam kod. Będę wdzięczny za wskazówki.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CodersLab</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main_cointainer">
        <div id="all_lists">
            <div class="large_list">
                <ul>
                    <li>
                        Lista 1 - Element 1
                    </li>
                    <li>
                        Lista 1 - Element 2
                    </li>
                    <li>
                        Lista 1 - Element 3
                    </li>
                </ul>
            </div>
            <ul>
                <li>
                    Lista 2 - Element 1
                </li>
                <li>
                    Lista 2 - Element 2
                </li>
                <li>
                    Lista 2 - Element 3
                </li>
                <li>
                    Lista 2 - Element 4
                    <ul>
                        <li>
                            Lista 3 - Element 4
                        </li>
                        <li>
                            Lista 3 - Element 4
                        </li>
                        <li>
                            Lista 3 - Element 4
                        </li>
                        <li>
                            Lista 3 - Element 4
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

2 odpowiedzi

odpowiedź 10 kwietnia 2018 przez Mariusz08 Maniak (62,280 p.)

li {
//style
}

Stylujesz po tagach.

komentarz 10 kwietnia 2018 przez TerryCrow Początkujący (340 p.)

Ok dzięki :)

komentarz 10 kwietnia 2018 przez TerryCrow Początkujący (340 p.)

@Mariusz08, Chociaż mam jeszcze jedno pytanie. W tym samym zadaniu mam takie polecenia:

Pierwszej liście ustaw kolor tła #FF00A5 a jej elementom kolor tła #36FF74,
Drugiej liście ustaw kolor tła #E8370E a jej elementom kolor tła #365FFF,
Trzeciej liście ustaw kolor tła #FFEC0C a jej elementom kolor tła #0DFFDE

I o ile w pierwszej liście byłoby to dla mnie proste bo jest ona zawarta w divie i tagach <ul> więc mogę się bez problemu odwołać do tej konkretnej listy ale druga i trzecia lista są zawarte we wspólnym tagu <ul> i tu już mam problem.

komentarz 10 kwietnia 2018 przez Mariusz08 Maniak (62,280 p.)

Dla ostylowania 1 listy użyłeś stylowania po klasie. Dla ostylowania drugiej listy pomoże Ci pseudoklasa :nth-child, a dla trzeciej listy (ostatniej) pomoże Ci pseudoklasa :last-child