[CSS] CSS 선택자(2)(기본 속성 선택자, 자식 선택자, 자손(후손) 선택자, 인접 형제 선택자, 일반 형제 선택자)

기본 속성 선택자

• 문법 : 태그[속성이름] {}
• HTML 요소의 속성을 기준으로 스타일을 지정할 수 있는 CSS 기능

 

<예시 코드>

[CSS 코드]

/* 속성값과 일치하는 태그, 요소 선택 */
div[name=name2] {
    background: orangered;
}

/* 속성 안의 값이 접두사로 특정 값을 단어로 포함하는 객체 선택 */
/* 즉, name1이라는 단어를 포함하고 있는 모든 객체 선택*/
div[name~=name1]{
    background: yellow;
}

/* 속성 안의 값이 특정 값으로 끝나는(접미사) 객체 선택 */
div[class$=class]{
    color: cyan;
}

 

[HTML 코드]

<div name="name1 name5 name6" class="div-class">div 1</div>
<div name="name2" class="div-class">div 2</div> 
<div name="name3" class="div-class">div 3</div> 
<div name="name4" class="class-div">div 4</div>

 

<결과>

• div1
  • background : yellow, color : cyan
  • name~=name1으로 인해 name의 값이 name1이라는 단어를 가지고 있는 태그의 경우 해당 CSS가 적용됨
  • class$=class으로 인해 class 값이 class로 끝나는 경우 그 태그에 해당 CSS가 적용됨.
• div2
  • background : red, color : cyan
  • name=name2으로 인해 name이 값이 name2로 정확히 일치하는 경우 그 태그에 해당 CSS가 적용됨.
  • class$=class으로 인해 class 값이 class로 끝나는 경우 그 태그에 해당 CSS가 적용됨.
• div3
  • background: 없음, color : cyan
  • name3에 해당하는 속성 CSS가 없으므로 background는 지정되지 않음.
  • class$=class으로 인해 class 값이 class로 끝나는 경우 그 태그에 해당 CSS가 적용됨.
• div4
  • background: 없음, color : 없음.
  • name4, class-div에 해당되는 속성 CSS가 없으므로 background, color은 지정되지 않음.

 

<다양한 속성 선택자 유형>

속성 선택자 문법	의미
[attr = "값"]	속성 값이 정확히 일치하는 요소 선택
[attr ~= "값"]	속성 값이 단어 목록 중에 포함되는 요소 선택(공백 기준 분리)
[attr^="값"]	속성 값이 해당 값으로 시작하는 경우
[attr^="값"]	속성 값이 해당 값으로 끝나는 경우
[attr*="값"]	속성 값이 해당 값을 포함하고 있을 경우

---

자식 선택자

• 문법 : A > B {}
• 부모 요소 A의 직계 자식 요소 B만 선택

 

<예시 코드>

[CSS 코드]

/* 자식 선택자 */
#testdiv > h4 {
    background: hotpink;
}

[HTML 코드]

<div id="testdiv">
    <h4>자식입니다.</h4>
    <h4>나도 자식입니다.</h4>
</div>

 

<결과>

• 부모 요소 #testdiv를 가지고 있는 div 태그의 직계 자손인 h4 태그에 해당 CSS가 적용된다.

---

자손(후손)선택자

• 문법 : A B {}
• A 내부에 있는 모든 후손 요소 중 B에 해당하는 것

 

<예시 코드>

[CSS 코드]

/* 후손 선택자 */
#testdiv ul {
    background: yellow;
    color : red;
}

[HTML 코드]

<div id="testdiv">
    <h4>자식입니다.</h4>
    <h4>나도 자식입니다.</h4>
    <ul id="testul"> 
        <li>나는 ul의 자식이면서 동시에 div의 후손입니다.</li>
    </ul>
    <h4>자식입니다.</h4>
</div>

 

<결과>

• #testdiv ul은 div#testdiv의 자식은 아니지만, 후손인 ul 요소에 스타일을 적용
• 이 스타일은 div#testdiv 안에 있는 모든 ul 요소에 적용되므로, 이 경우에는 ul#testul에 적용
• 따라서 ul#testul의 배경색이 노란색으로 바뀌고, 글자 색은 빨간색이 됨.
• ul은 div#testdiv의 후손이고, li도 div#testdiv의 후손입니다.
• li는 ul의 자식이며, ul은 div#testdiv의 후손입니다.

---

인접 형제 선택자

• 문법 : A + B {}
• A 바로 뒤의 형제요소 B
• 딱 하나만 선택 가능

 

<예시 코드>

[CSS 코드]

/* 해당 요소(#div-test1) 바로 다음에 있는 특정 타입(div)의 요소를 선택 */
#div-test1 + div {
    background: yellow;
}

 

[HTML 코드]

<div id="div-test1">div test1</div>
<div id="div-test2">div test2</div>
<div id="div-test3">div test3</div>

 

<결과>

• div#div-test1의 바로 다음에 있는 div에 해당 CSS가 적용됨(배경색 : 노란색)

---

일반 형제 선택자

• 문법 : A + B {}
• A 다음에 오는 모든 B 형제
• 여러 개 선택이 가능하고 순서가 중요하다.

 

<예시 코드>

[CSS 코드]

/* 해당 요소 뒤에 있는 특정 타입의 모든 요소를 선택 */
#div-test2 ~ div {
    background: purple;
}

 

[HTML 코드]

<div id="div-test1">div test1</div>
<div id="div-test2">div test2</div>
<div id="div-test3">div test3</div>
<div id="div-test4">div test4</div>
<div id="div-test5">div test5</div>

 

<결과>

• div#div-test2의 다음에 있는 모든 div에 해당 CSS가 적용됨(배경색 :보라색)