[CSS] 속성 선택자 정리

[CSS] 형제 선택자 / 속성선택자

형제 선택자

• 같은 부모를 가지는 요소.

1. 인접 형제 선택자

1. 선택자 사이를 +를 사용하여 나타낸다.
2. 앞 요소 바로 뒷 요소만 선택.

h1 + ul {
    color: red;
}

2. 일반 형제 선택자

1. 선택자 사이를 ~를 사용하여 나타낸다.
2. 앞 요소 뒤에 있는 모든 뒷 요소 선택.

h1 ~ ul {
    color: red;
}

속성 선택자

• 각 태그가 가지고 있는 속성에 접근하는 방식.
• 적절한 id와 class 이름이 없을 경우 애용한다.
  
  속성 선택자(attribute selector)는 HTML의 속성명과 속성값을 선택자로 지정할 수 있다.

    <p style="color: red;">
    // p            태그(tag)
    // style        속성명(attribute)
    // color: red   속성값(value)

1. [attribute]

[속성명]

<p title="banana">속성명선택자는 태그요소와 같이 선택자로 사용할 수 있다.</p>
<p title="tomato">속성명이 일치해도 태그가 불일치하면 선택되지 않는다.</p>
<a href="https://www.google.co.kr" target="_blank">구글</a>

h1[title] {color: red; }
[href] { color: red; }

2. [attribute="value"]

[속성명 + "속성값"]

<p class="tomato">속성명과 속성값이 모두 일치하는 요소 선택자로 지정.</p>
<li class="tomato">태그와 무관하게 속셩명과 속성값이 일치하면 선택.</li>

 

3. [attribute~="value"]

[속성명 ~= "속성값"]

공백으로 작성된 합성어 가능.

<p title="faker">독립단어 가능.</p>
<p title="SKT1 faker">공백으로 작성된 합성어는 상관없이 적용된다.</p>

 

4. [attribute*="value"]

[속성명 *= "속상값"]

* 전체를 선택하는 의미.

공백, 하이픈, 언더바 및 공백없이 이어진 단어 조합에도 적용.

<p title="faker">독립단어 적용.</p>
<p title="SKT1-faker">하이픈, 언더바 적용.</p>
<p title="SKT1faker">공백이 없는 합성어도 가능.</p>

 

5. [attribute|="value"]

[속성명 |= "속성값"]

공백적용안됨.

하이픈(-)으로 연결된 경우만 가능.

<p title="faker">독립단어는 적용.</p>
<p title="faker-SKT1">하이픈으로 연결되고 접두사에 있으면 적용.</p>
<p title="SKT1-faker">적용 불가능.</p>

 

6. [attribute^="value"]

[속성명 ^= "속성값"]

공백가능. 하이픈(-), 언더바(_) 가능.

공백이 없는 합성어도 가능.

접두사에는 가능.

<p title="faker">독립 단어는 적용.</p>
<p title="SKT1-faker">하이픈으로 연결되어도 접미사는 적용안됨.</p>
<p title="faker_SKT1">언더바가 있고 접두사에 있으면 적용.</p>
<p title="fakerSKT1">공백이 없는 합성어도 접두사에 있을 경우 적용.</p>
<p title="SKT1faker">공백이 없고 접미사 있을 경우 적용안됨.</p>

 

7. [attribute$="value"]

[속성명 $= "속성값"]

공백가능. 공백없어도 가능.

하이픈, 언더바 가능.

특정 단어가 뒤에 있을 경우(접미사) 속성값을 선택자로 지정하고 싶은 경우 사용.

<p title="faker">독립 단어는 적용.</p>
<p title="faker SKT1">공백으로 작성된 접두사에는 적용안됨.</p>

 

 

정리

[class*='all-'] [class$='-ends'] li:first-child:nth-last-child(3),
[class*='all-'] [class$='-ends'] li:first-child:nth-last-child(3) ~ li { }

즉 all- 명으로 설정된 모든 클래스와 -ends 로 끝나는 클래스 명의 li의 첫번째와 마지막에서 세번째(즉 자신)와,

위의 모든 형제들(li) 의 스타일을 지정해준다는 뜻이다.

 

 

Reference

https://dasima.xyz/css-attribute-selector/