[CSS] 기본속성 | 자식선택자 | 후손선택자

생성자	작성방법	작성상세
태그	태그명	태그명 { CSS코드 ; }
아이디	#	# id속성값{css 코드;}
클래스	.	. class속성값{ css코드; }
속성	[ ]	선택자[속성명 = "속성값"] { CSS 코드; }
자식	>	선택자1 > 선택자2 { CSS 코드; }
후손	( ) 띄어쓰기	선택자1 선택자2 { CSS 코드; }

 

🔊 기본 속성 생성자

태그에 작성된 특정 속성을 선택하는 선택자  (id, class도 선택 가능 하지만 보통 #, .을 사용함)

[작성법] 선택자[속성명 = "속성값"] { CSS 코드; }        (참고)         1) 선택자는 생략할 수 있다.             -> 특정 속성을 가진 모든 요소 선택1                     2) "속성값" 양쪽의 쌍따옴표("")는             홑따옴표('')로 변경하거나 생략할 수 있다.

 

✅ CSS 작성 

   div[name ="name-1"]{background-color: aqua;}

   [name="name-2"]{background-color: violet;}

   p[name =name-1]{ background-color: brown;}

✅ HTML 작성

    <div name="name-1">div1</div>
    <div name="name-1">div2</div>
    <div name="name-2">div3</div>
    <div name="name-2">div4</div>

    <p name="name-1">p1</p>
    <p name="name-1">p2</p>
    <p name="name-2">p3</p>
    <p name="name-2">p4</p>

✅ 결과물

 

 

🔊 자식 선택자 (자식 : 1단계 아래)

지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자

[작성법] 선택자1 > 선택자2 { CSS 코드; } - 선택자1 : 부모 요소 선택(반드시필요) - 선택자2 : 자식 요소 선택(반드시필요)

✅ CSS 작성 

   #parent-ul > li { background-color: orange;}
   
   #parent-ul > li > span{ background-color: red;}

✅ HTML 작성

    <ul id="parent-ul">부모
        <li>자식1</li>

        <li>
            <span>자식2</span>
        </li>

        <li>자식 3</li>

        <li>
            <span>자식4</span>
        </li>
    </ul>

✅ 결과

 

 

🔊 후손(자손) 선택자 (후손 : n단계 모두)

지정된 요소의 모든 하위에 있는 요소를 선택하는 선택자

[작성법]  선택자1 선택자2 { CSS 코드; }         선택자1 : 부모(조상) 요소 선택자 선택자2 : 후손 요소 선택자

✅ CSS 작성 

   /* 후손 선택자*/
   #test-div{border : 2px solid black;
       
   }
   #test-div p {
       background-color: aqua;
   }

 

✅ HTML 작성

    <div id="test-div">
        <p>test-div의 자식 요소 입니다.</p>
        <p>test-div의 후손 요소 입니다.</p>

        <div>
            <p>이것도 후손일까?</p>
        </div>
    </div>

✅ 결과