Css #14 - 후손 선택자, 자손 선택자, 동위 선택자

후손 선택자

부모안의 자식들을 선택하는 선택자.
부모안의 자식들을 선택할 때 공백으로 표기함.

[기본형]
부모태그 자식태그{ 속성 : 값 ; }

<div class="box">
       <h2>title</h2>
       <p>Lorem ipsum dolor <span>amet consectetur</span>  adipisicing elit.
           Cumque, nihil repudiandae odio fugiat laborum eaque porro? Facere non perspiciatis velit 
           quam atque <span>accusantium quisquam hic mollitia</span> provident, quo molestias ab.
       </p>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
           Cumque, nihil repudiandae odio fugiat laborum eaque porro? Facere non perspiciatis velit 
           quam atque accusantium quisquam hic mollitia provident, quo molestias ab.
       </p>
    </div>

    <div class="box1">
       <h2>title</h2>
       <p><span>Lorem ipsum dolor</span> sit amet consectetur adipisicing elit.
           Cumque, nihil repudiandae odio fugiat laborum eaque porro? Facere non perspiciatis velit 
           quam atque accusantium <span>quisquam hic mollitia provident,</span> quo molestias ab.
       </p>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
           Cumque, nihil repudiandae odio fugiat laborum eaque porro? Facere non perspiciatis velit 
           quam atque accusantium quisquam hic mollitia provident, quo molestias ab.
       </p>
    </div>

    <br>
    <ul>
       <li>다음</li>
       <li class="menu"><a href="https://www.naver.com/" target="_blank">네이버</a></li>
       <li>구글</li>
       <li>카카오</li>
    </ul> 

/* css코드 */    
/* 후손 선택자 */
div p{
    /* html문서 내의 모든 div태그 안에 있는 p태그를 선택함 */
    color : rgb(182, 218, 121);
}

.box1 p{
    /* .box1안에 있는 자식태그 p태그를 선택함. */
    color: blueviolet;
}

div p span{
    /* html문서 내의 모든 div태그 안에 있는 p태그 안의 span선택함 */
    color: sandybrown;
}

.box1 p span{
    /* .box1안에 있는 자식태그 p태그 안의 span 선택함. */
    color: lightgoldenrodyellow;
}

/* ul 안에 클래스가 menu인 자식 안에 a태그를 선택해주세요.
    조건 1 : ul안에 자식은 4개가 있어야 합니다.
    조건 2 : a태그에는 네이버가 새창으로 열리는 링크가 들어 있어야 합니다.
    조건 3 : ul안에 자식은 4개 각각 텍스트가 다음, 네이버, 구글, 카카오가 들어 있어야 합니다.
*/

ul .menu a{   /* = ul li a  = li a = .menu a */
    color: darkseagreen;
    text-decoration: none;
}

자손 선택자

부모 태그 안에 있는 자식 요소를 선택할 때 사용함.
후손 선택자는 공백으로 구분하며 어떤 부모태그 안에 해당 자식태그가 들어있으면
몇 계증 아래에 있던지 상관없이 모두 선택함.
하지만 자손선택자는 바로 아랫계층 안에 있는 자식태그만 선택한다.

[기본형]
부모선택자 > 자식선택자 { 속성 : 값 ; }

동위선택자

동위선택자(=형제선택자)는 동위관계에서 바로 아랫줄에(뒤에) 있는 형제 태그를 선택하거나 뒤에 있는 모든 형제 태그를 선택할 때 사용함.

• 선택자는 바로 뒤에 있는 형제 태그 1개를 선택할 때 사용하고, 바로 뒤에 해당 동생태그가 없으면 선택되지 않음.
  ~ 선택자는 위치와 관계없이 기준 태그(형) 뒤에 해당 동생태그가 있으면 모두 선택함.

  [기본형]
  1. 선택자A + 선택자B{ 속성 : 값; }
  ex)h1 + h2
  바로 뒤에 있는 바로 1개만 선택
  2. 선택자A ~ 선택자B{ 속성 : 값; }
  

 	<h1>제목1</h1>
    <h2>제목2</h2>
    <h2>제목2</h2>
    <h2>제목2</h2>
    <h2>제목2</h2>
    <h2>제목2</h2>
    <h2>제목2</h2>
    <h2>제목2</h2>
    <h2>제목2</h2>
    <h2>제목2</h2>

/* css코드 */
/* 동위선택자 */
/* +는 형태그 바로 뒤에 있는 동생태그 1개를 선택 */
h1 + h2{
    background-color: blanchedalmond;
}

/* css코드 */
/* ~는 형태그 뒤에 있는 모든 동생태그를 선택 */
h1 ~ h2{
    background-color: azure;
}