해당 게시글은 css 선택자를 조금 더 구체적으로 명시할 수 있는 방법에 대한 내용을 다루었다. id, class, 요소명 등으로 선택하는 방법 외에 "특정 문자열을 포함하거나, 특정 문자열을 포함한 요소를 제외한"등의 조건을 제시하여 선택할 수 있다. 목차는 다음과 같다.
1. 특정 문자열을 포함하는 요소
1) 대소문자 구분 O
2) 대소문자 구분 X
2. 특정 속성을 가진 요소
3. 다중 문자열을 포함하는 요소
4. 특정 속성을 가지지 않은 요소
1. 특정 문자열을 포함하는 요소
1) 대소문자 구분 O
특정 요소를 선택하기에 앞서 대략적으로 아래와 같은 요소들을 포함하는 html문서가 있다고 가정해보자.
<html>
<body>
<div class="article_intro">소개말</div>
<div class="article_section1">섹션1</div>
<div class="article_SECTION2">섹션2</div>
<div class="article_section3">섹션3</div>
</body>
</html>
/* 사용 방법 */
[속성명*='검색할 문자열']
/* 예시1. 클래스명에 "article_"이 포함된 요소 */
[class*='article']
/* 예시2. 클래스명에 "section"이 포함된 요소 */
[class*='section']
*= : 검색 조건에 일치하는 문자열이 포함된 요소를 선택함
즉, 1번 주석에 해당되는 선택자로 인해 class속성에 'article'이 포함된 4개의 요소를 선택할 수 있다.
2번 주석에 해당되는 선택자로 인해 class 속성에 'section'이 포함된 2개의 요소(SECTION2 제외)를 선택할 수 있다.
2) 대소문자 구분 X
<html>
<body>
<div class="article_intro">소개말</div>
<div class="article_section1">섹션1</div>
<div class="article_SECTION2">섹션2</div>
<div class="article_section3">섹션3</div>
</body>
</html>
/* 사용방법 */
[속성명*='검색할 문자열' i]
/* 예시 */
[class*='section' i]
i : 대소문자를 무시하고 문자열을 매칭함
매칭할 문자열 뒤에 공백을 띄워서 i로 옵션을 추가하면 대소문자를 무시하고 문자열을 매칭할 수 있으며, 위의 예시를 통해 class명에 section을 포함하는 섹션1, 섹션2, 섹션3을 모두 선택할 수 있다.
2. 특정 속성을 가진 요소
마찬가지로 특정 요소를 선택하기에 앞서 대략적으로 아래와 같은 요소들을 포함하는 html문서가 있다고 가정해보자.
<html>
<body>
<a class="a_tag" href="https://www.google.co.kr/">구글</a>
<a href="http://www.naver.com">네이버</a>
</body>
</html>
/* 사용방법 */
요소[속성명]
/* 예시1 */
a[class]
/* 예시2 */
a[href]
값 없이 속성 이름만 표시하는 방법이다. 해당 속성을 가지는 요소를 모두 선택할 수 있다.
예시 1의 경우 "구글"만을 선택하며, 예시 2의 경우 "구글"과 "네이버"를 선택한다.
3. 다중 문자열을 포함하는 요소
<html>
<body>
<a class="a_tag" href="https://www.google.co.kr/">구글</a>
<a href="http://www.naver.com">네이버</a>
</body>
</html>
/* 사용방법 */
요소[속성명^='맨 처음에 해당되는 문자열'][속성명$='맨 끝에 해당되는 문자열']
/* 예시1 */
a[href^='http:']
/* 예시2 */
a[href$='kr']
/* 예시3 */
a[href^='http:'][href$='com']
^= : 특정 속성값에 맨 앞에서부터 매칭되는 문자열을 검색
$= : 특정 속성값에 맨 뒤에서부터 매칭되는 문자열을 검색
예시 1의 경우 "구글", "네이버"를 선택하고, 예시 2의 경우 "구글"을 선택하며, 예시 3의 경우"네이버"를 선택할 것을 짐작할 수 있다.
4. 특정 속성을 가지지 않은 요소
<html>
<body>
<a class="a_tag" href="https://www.google.co.kr/">구글</a>
<a href="http://www.naver.com">네이버</a>
</body>
</html>
/* 사용방법 */
요소:not([속성명])
/* 예시 */
a:not([class])
:not() 괄호 안의 조건에 해당되지 않는 요소들을 선택함
예시의 경우 a태그 중 class속성을 가지고 있지 않은 "네이버"가 선택될 것을 예상할 수 있다.
이 게시글은 아래 링크의 블로그를 참조하여 본인이 파악하기 쉬운 구조로 작성하였다.
https://blogpack.tistory.com/1001
클래스와 속성값을 문자열로 검색하는 5가지 CSS 선택자 사용법
클래스, 또는 속성 값의 일부를 매칭 해서 원하는 요소들을 선택할 수 있는 다양한 CSS 선택자가 제공됩니다. 그중에서 활용도가 가장 높고 빈번하게 사용하는 5가지 주요한 검색 매칭 선택자를
blogpack.tistory.com
'HTML & CSS' 카테고리의 다른 글
| [CSS] padding 사용 시, 부모 벗어나는 문제 (0) | 2023.03.13 |
|---|---|
| [CSS] 그라데이션 버튼 생성 (0) | 2022.11.21 |
| [CSS] 상대경로, 절대경로 (0) | 2022.09.27 |
| [CSS] Display속성_float, flex, grid (0) | 2022.02.11 |
| [CSS] 여백관리 & 애니메이션효과 & 반응형 웹 (0) | 2022.02.10 |
