css speedrun

유튜브 리베하얀님 영상으로 알게된 css speedrun 홈페이지! 

https://css-speedrun.netlify.app/

CSS Speedrun | Test your CSS Skills

화살표가 가르키는 선택자를 불러오면 되는 것! 

근데 생각보다 어려워서.. 놀랐고 나의 실력에 놀랐다.. (못해서) 하하하...

자주 쓰지 않다보니 이런 불상사가 일어난 것이라고 본다. 

그래서 복습하는겸 공부하는 겸 글로 정리해본다!

 

①

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

 

내 답: li:nth-child(1)                   

devs choice : li:first-child

 

// nth-child는 형제 사이에서의 순서에 따라 요소를 선택함. li:nth-child(2)는 목록의 두번째 <li> 선택.

// first-child 는 이름에서 알 수 있듯이 첫 번째 자식요소를 선택한다.

 

② 

    <div>

        <p></p>

        <p class="foo"></p>

        <p></p>

        <p></p>

    </div>

 

내답, devs choice : p:not(.foo)

 

// :not( ) 선택자는 부정 CSS 가상 클래스로 특정 선택자가 제외된 경우에 대한 스타일을 적용할 수 있음.

    해당 선택자를 제외한 나머지 요소를 선택하기 위해 사용한다!

 

③

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

 

내 답: li:nth-child(3), li:nth-child(5), li:nth-child(7)

devs choice : li:nth-child(2n + 3);

// 내 답은.... 너무 별 볼일 없는 답.... 하하하

 

④

    <div>

        <span></span>

        <p>

            <a></a>

            <span></span>

        </p>

    </div>

 

내 답: div>span, div>p   > 이 기호는 바로 아래에 있는 자식을 선택하는것!

devs choice : div > *     div의 직계자식 모두, * 는 모든 선택자를 선택하는 것

 

⑤

    <div>

        <span data-item="foo"></span>

        <span></span>

        <div>

            <span></span>

            <span data-item="bar"></span>

            <span></span>

        </div>

    </div>

 

내 답: span[data-item="foo"], span[data-itme="bar"] 

devs choice : span[data-item]          아하.. 이렇게 선택하면 되는구나... 

 

⑥

    <div>

        <span></span>

        <code></code>

        <span></span>

        <p></p>

        <span></span>

        <span></span>

        <p></p>

        <code></code>

        <span></span>

        <p></p>

    </div>

 

내 답 : p~span

devs choice : p~span

 

인접 형제 선택자 

a + b => 같은 부모를 가지고 a 바로 뒤에 오는 b만 적용

ex) img + span {font-style: italic;}

img 바로 뒤에 오는 span 에만 이탤릭체로 표시함

 

일반 형제 선택자

a ~ b => 같은 부모를 가지고, a 뒤에 오는 b에 적용. (바로 뒤에 올 필요 없음)

ex) p ~ span {color:red;}

p 뒤에 오는 span 요소는 빨간글씨

 

 

⑦

 

⑧ 

    <ol>

        <li class="me" id="one"></li>

        <li class="you" id="two"></li>

        <li class="me" id="three"></li>

        <li class="you" id="four"></li>

        <li class="me" id="five"></li>

        <li class="you" id="six"></li>

        <li class="me" id="seven"></li>

        <li class="you" id="eight"></li>

        <li class="me" id="nine"></li>

        <li class="you" id="ten"></li>

    </ol>

 

내 답, devs choice : #one, #two, #five, #six, #nine

 

⑨ 

    <div>

        <span></span>

        <p>

            <a></a>

            <span></span>

        </p>

        <p>

            <span></span>

            <a></a>

            <span></span>

            <span></span>

        </p>

        <a></a>

        <span></span>

    </div>

 

내 닶, devs choice : a+span

 

⑩ 

    <div id="foo">

        <div class="foo"></div>

        <div></div>

        <div>

            <div class="foo"></div>

            <div></div>

        </div>

        <div class="foo"></div>

    </div>

 

내 답, devs choice : #foo > .foo

직계자식 > 중에 .foo 를 선택.

 

⑪ 

    <div>

        <div>    

            <span></span>

            <code></code>

        </div>

        <div>

            <code></code>

            <span></span>

            <code></code>

        </div>

        <div>

            <span></span>

            <code class="foo"></code>

        </div>

        <span></span>

        <code></code>

    </div>

 

내 답: div>div>span+code:not(.foo)

devs choice : div div span + code:not(.foo)