"CSS 선택자 2"에 관한 의견

5 개의 의견이 있습니다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

  1. Kurosnape 님의 의견

    안녕하세요. 강의 잘 보고 있습니다. CSS 선택자 2에서 선택자 first-child만 나오고 그 뒤로는 끊겨있는데, last-child, nth-child(n) 정도는 더 설명해주셔도 될 것 같습니다!

  2. hi 님의 의견

    안녕하세요, 좋은 강의 정말 감사합니다. 배경지식까지 꼼꼼하게 알려주셔서 이해하는데 도움이 많이 되고 있어요.

    큰 문제는 아니지만 오타가 하나 있는 것 같아 말씀드려요.
    A~B 선택자에서 형제 선택자가 선택된다고 하셨는데, 예시에서 div인 something else까지 빨간색으로 되어있더라구요. 그런데 div가 변한다는 설명도 없고 제가 코드를 따라 해봐도 div는 검은색으로 나와서, 오타가 아닐까 합니다. 그리고 저는 형제선택자를 같은 요소로 이해했는데 제가 맞게 이해한 건가요?

    1. mr. Webber 님의 의견

      안녕하세요. 네 잘못된 예시가 맞습니다.^^;

      div는 적용이 안되는게 맞아요. 맞게 이해하신 거세요.

      예시 부분은 바로 수정했습니다. 감사합니다.

  3. 임준한 님의 의견

    안녕하세요, html / css 에 대해서 사이트대로 너무나 잘 배우고 있습니다.
    자식선택자 부분을 보면서.. 실습 과정에서 잘 안되는 부분이 있어 질문 남깁니다.
    .a > li {
    color: red;
    }
    이렇게 함으로서 “a 요소의 바로 하위 li요소”에 적용이 되는 걸로 이해를 했는데요.
    예시코드를 돌려보면 모든 항목에 다 적용이 되더라구요.
    예시 html 코드를 보면

    Korea

    Seoul
    Incheon

    USA

    New York
    New Jersey

    이런데, 글에서 설명되는 부분이 정확히 a 요소의 li 바로 아래에 있는 “korea”만을 뜻하는건지, 아니면 a 요소 아래의 li가 포함하는 모든 요소를 말하는건지 헷갈려서요!

    1. mr. Webber 님의 의견

      안녕하세요. 보니 예시에 오류가 좀 있네요; 죄송합니다.

      일단 .a > li를 하면, .a 밑의 모든 li가 아닌 .a 바로 아래에 있는 자식 li 요소들만(“Korea, USA”) 선택하는 것이 맞아요. 그래서 “color: red”가 해당 li에 적용된 것 까진 맞습니다.

      그런데 이게 전체 글자가 빨간 글씨가 된 이유는 ‘color’나 ‘font’ 속성 값들은 대부분 부모에게 상속을 받기 때문에, .b나 .b 밑에 있는 li는 기본 적으로 해당 속성이 없다면, 부모의 속성을 그대로 적용 받게 됩니다. 그래서 부모의 빨간 글씨를 다 물려 받게 된 것이고요.

      그래서 “color”나 “font”같은 속성이 아닌, “background”나 “listy-style”같은 부모 속성을 그대로 상속 받지 않는 속성을 사용하시면, 선택자가 어떻게 선택되었는지 확인하실 수 있으실 겁니다.

      이 부분을 제가 고려를 못하고 헷갈릴 만한 예시를 넣었네요; 금방 수정하도록 하겠습니다.

      말씀 주셔서 감사합니다.^^ 남은 공부도 잘 되시길 바래요.