Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

セレクタの練習

css

htmlを

<html>
    <head>
    <link rel="stylesheet" href="sample.css"/>
    </head>
    <body>
        <div class="root"> 根っこ
            <div class="sub">
                根っこの子供
                 <div class="subsub">  
                     根っこの子供の子供
                 </div>
                 <div class="poge">  
                    根っこの子供の子供2
                </div>
            </div>
            <div class="poi">  
                根っこの子供2
            </div>
            <div class="poi2">  
                根っこの子供3
            </div>
        </div>
        <div class="tonari">
            根っこの隣
        </div>
    </body>
</html>

とする。

cssとして

.root {
    background-color: red;
    padding: 30px;
}

.root > div {
    padding: 0px 50px;
}

.root > div > div {
    background-color: indigo;
}

div:not([class*="sub"]) {
    font-size: 50px;
}

div[class*="sub"] {
    font-size: 5px;
}

.sub::first-line {
    color: yellow;
}

.poge::after {
    content: "!";
    color: plum;
}
div:nth-child(3) {
    color: purple;
    background-color: greenyellow;
}

などが使える。ダサいページができる。

f:id:KatagiriSo:20211213173857p:plain
結果