Stylizowanie dwóch różnych nieuporządkowanych list <ul>

pytanie zadane 17 lipca 2017 w HTML i CSS przez plkpiotr Stary wyjadacz (12,420 p.)
edycja 18 lipca 2017 przez plkpiotr

W jaki sposób mogę określić dwa różne style dla różnych list <ul> w CSS? Wewnątrz HTML umieszczone są jak niżej:

div container
- div wrapper
  - first ul
- div beam
  - second ul

<!DOCTYPE HTML>
<html lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Home page web application's for group of squash players">
    <meta name="keywords" content="squash, team, games, matches, players, society, app, html, css, js, php, sql">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="img/squashBall.png">
    <link rel="stylesheet" href="css/general.css">
    <!--    <link rel="stylesheet" href="css/offline.css">-->
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700&amp;subset=latin-ext" rel="stylesheet">
    <title>
        Home | Squash Court
    </title>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <header>
                <nav>
                    <ul>
                        <li class="online"><a href="get-to-know-squash-court-better">Home</a></li>
                        <li class="online"><a href="#">Calendar</a></li>
                        <li class="online"><a href="#">Games</a></li>
                        <li class="online"><a href="#">Rankings</a></li>
                        <li class="online"><a href="#">Chat</a></li>
                        <li class="online"><a href="#">Profile</a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <section>
            <div class="panel">
                <h1>Web application for group of squash players</h1>
                <img src="img/playing-squash-game.jpg" alt="Squash match">
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deleniti, exercitationem praesentium
                    quasi reiciendis suscipit voluptatibus? Eos est omnis quod tempora voluptate! Accusantium dolorum
                    eius magnam, maxime reiciendis sit voluptatem? Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Adipisci aliquid beatae dolor minima neque placeat quae tenetur! Accusantium consectetur
                    consequatur est fugit, hic nisi omnis repellendus? Aliquid cupiditate quae tempore!</p>
            </div>
        </section>
        <main>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deleniti, exercitationem praesentium
                quasi reiciendis suscipit voluptatibus? Eos est omnis quod tempora voluptate! Accusantium dolorum
                eius magnam, maxime reiciendis sit voluptatem? Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Adipisci aliquid beatae dolor minima neque placeat quae tenetur! Accusantium consectetur
                consequatur est fugit, hic nisi omnis repellendus? Aliquid cupiditate quae tempore!</p>
                uatur est fugit, hic nisi omnis repellendus? Aliquid cupiditate quae tempore!</p>
        </main>
        <footer>
            <div class="beam">
                <ul>
                    <li>First</li>
                    <li>Second</li>
                    <li>Third</li>
                    <li>Forth</li>
                </ul>
                <p class="signature">
                    WEB SQUASH COURT - All rights reserved - 2017 - &copy
                </p>
            </div>
        </footer>
    </div>
</body>

Próbowałem w następujący sposób, wpisując kolejno elementy, które się w sobie zawierają, zarówno z selektorami > jak i bez (edit: najwyraźniej błąd składniowy, bo ich usunięcie rozwiązało problem), jednak bez pożądanych efektów:

body {
    color: white;
    background-color: #121212;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    margin: 0;
}

.wrapper > {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.wrapper > ul {
    margin: 0;
    text-align: center;
    cursor: default;
    height: 60px;
}

.wrapper > ul > li {
    display: inline-block;
    width: 100px;
    line-height: 200%;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wrapper > ul > li > a {
    color: #ffffff;
    font-weight: 700;
    display: block;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.wrapper > ul > li.online:hover {
    background-color: #f16a85;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.wrapper > ul > li > a {
    text-decoration: none;
}

.panel {
    text-align: center;
    margin-top: 60px;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.panel img {
    filter: brightness(40%) blur(3px);
    position: relative;
    width: 100%;
    margin: -500px 0 0 0;
}

.panel > h1 {
    font-size: 40px;
    position: absolute;
    top: 100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
}

.panel > h1::after {
    content: '';
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 2px solid #dc143c;
    width: 300px;
}

.panel > p {
    position: absolute;
    top: 250px;
    margin-left: 200px;
    margin-right: 200px;
    text-align: center;
    z-index: 5;
}

.beam > ul {
    background-color: black;
}

@media (max-width: 570px) {
    .wrapper > ul {
        background-color: purple;
    }

    .wrapper > ul > li {
        width: 60px;
    }

    .wrapper > ul > li > a {
        font-size: 14px;
    }

    .panel > img {
        margin: -20px 0 0 0;
    }

    .panel > h1 {
        font-size: 22px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 12px;
        top: 160px;
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (min-width: 571px) and (max-width: 768px) {
    .wrapper > ul {
        background-color: deepskyblue;
    }

    .wrapper > ul > li {
        width: 70px;
    }

    .wrapper > ul > li > a {
        font-size: 16px;
    }

    .panel > img {
        margin: -20px 0 0 0;
    }

    .panel > h1 {
        font-size: 24px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 16px;
        top: 160px;
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .wrapper > ul {
        background-color: green;
    }

    .wrapper > ul > li {
        width: 80px;
    }

    .panel > img {
        margin: -210px 0 0 0;
    }

    .panel > h1 {
        font-size: 26px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 16px;
        top: 160px;
        margin-left: 100px;
        margin-right: 100px;
    }
}

@media (min-width: 981px) and (max-width: 1200px) {
    .wrapper > ul {
        background-color: orange;
    }

    .wrapper > ul > li {
        width: 90px;
    }

    .panel > img {
        margin: -280px 0 0 0;
    }

    .panel > h1 {
        font-size: 32px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 18px;
        top: 180px;
        margin-left: 200px;
        margin-right: 200px;
    }
}

@media (min-width: 1201px) and (max-width: 1600px) {
    .wrapper > ul {
        background-color: #dc143c;
    }

    .panel > img {
        margin: -330px 0 0 0;
    }
}

@media (min-width: 1601px) {
    .wrapper > ul {
        background-color: black;
    }

    .panel > img {
        margin: -460px 0 0 0;
    }

    .panel > h1 {
        font-size: 36px;
        top: 100px;
    }

    .panel > h1::after {
        margin-top: 15px;
        display: block;
        width: 300px;
    }

    .panel > img {
        margin: -280px 0 0 0;
    }

    .panel > h1 {
        font-size: 36px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 15px;
        width: 250px;
    }

    .panel > p {
        font-size: 24px;
        top: 200px;
        margin-left: 400px;
        margin-right: 400px;
    }
}

Co robię niewłaściwie? Chodzi o kolejność zapisu, czy może niepoprawnie wykorzystuję Media Queries?

1 odpowiedź

odpowiedź 17 lipca 2017 przez Comandeer Guru (600,730 p.)
wybrane 17 lipca 2017 przez plkpiotr

Najlepsza

Nie możesz użyć >, bo te listy nie są bezpośrednio w tych div. Możesz co najwyżej użyć czegoś na kształt .wrapper ul, .wrapper li itd.

komentarz 17 lipca 2017 przez plkpiotr Stary wyjadacz (12,420 p.)

Dziękuję za pomoc, istotnie zrezygnowanie z "bezpośredniego" zawierania pomogło:

body {
    color: white;
    background-color: #121212;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    margin: 0;
}

.wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.wrapper ul {
    margin: 0;
    text-align: center;
    cursor: default;
    height: 60px;
}

.wrapper ul > li {
    display: inline-block;
    width: 100px;
    line-height: 200%;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wrapper ul > li > a {
    color: #ffffff;
    font-weight: 700;
    display: block;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.wrapper ul > li.online:hover {
    background-color: #f16a85;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.wrapper ul > li > a {
    text-decoration: none;
}

.panel {
    text-align: center;
    margin-top: 60px;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.panel img {
    filter: brightness(40%) blur(3px);
    position: relative;
    width: 100%;
    margin: -500px 0 0 0;
}

.panel > h1 {
    font-size: 40px;
    position: absolute;
    top: 100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
}

.panel > h1::after {
    content: '';
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 2px solid #dc143c;
    width: 300px;
}

.panel > p {
    position: absolute;
    top: 250px;
    margin-left: 200px;
    margin-right: 200px;
    text-align: center;
    z-index: 5;
}

.beam ul {
    background-color: black;
}

@media (max-width: 570px) {
    .wrapper ul {
        background-color: purple;
    }

    .wrapper ul > li {
        width: 60px;
    }

    .wrapper ul > li > a {
        font-size: 14px;
    }

    .panel > img {
        margin: -20px 0 0 0;
    }

    .panel > h1 {
        font-size: 22px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 12px;
        top: 160px;
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (min-width: 571px) and (max-width: 768px) {
    .wrapper ul {
        background-color: deepskyblue;
    }

    .wrapper ul > li {
        width: 70px;
    }

    .wrapper ul > li > a {
        font-size: 16px;
    }

    .panel > img {
        margin: -20px 0 0 0;
    }

    .panel > h1 {
        font-size: 24px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 16px;
        top: 160px;
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .wrapper ul {
        background-color: green;
    }

    .wrapper ul > li {
        width: 80px;
    }

    .panel > img {
        margin: -210px 0 0 0;
    }

    .panel > h1 {
        font-size: 26px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 16px;
        top: 160px;
        margin-left: 100px;
        margin-right: 100px;
    }
}

@media (min-width: 981px) and (max-width: 1200px) {
    .wrapper ul {
        background-color: orange;
    }

    .wrapper ul > li {
        width: 90px;
    }

    .panel > img {
        margin: -280px 0 0 0;
    }

    .panel > h1 {
        font-size: 32px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 18px;
        top: 180px;
        margin-left: 200px;
        margin-right: 200px;
    }
}

@media (min-width: 1201px) and (max-width: 1600px) {
    .wrapper ul {
        background-color: #dc143c;
    }

    .panel > img {
        margin: -330px 0 0 0;
    }
}

@media (min-width: 1601px) {
    .wrapper ul {
        background-color: black;
    }

    .panel > img {
        margin: -460px 0 0 0;
    }

    .panel > h1 {
        font-size: 36px;
        top: 100px;
    }

    .panel > h1::after {
        margin-top: 15px;
        display: block;
        width: 300px;
    }

    .panel > img {
        margin: -280px 0 0 0;
    }

    .panel > h1 {
        font-size: 36px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 15px;
        width: 250px;
    }

    .panel > p {
        font-size: 24px;
        top: 200px;
        margin-left: 400px;
        margin-right: 400px;
    }
}

Korzystając z tego, że problem rozwiązany, czy mogę zapytać o powierzchowną ocenę dotychczasowego kodu - niekoniecznie Pana? Jest to mój pierwszy projekt i mam wątpliwości, czy póki co będzie coś z tego, czy raczej web developer „płakał jak przeglądał’’ ; )

1	komentarz 17 lipca 2017 przez Comandeer Guru (600,730 p.) Selektory powinni być jak najkrótsze, w idealnym przypadku zawierać po prostu klasę. Można np. poczytać sobie o metodologii BEM.