속성선택자
알아두면 쓸모있는 유용한 속성선택자~ 근데 매번 제대로 활용을 못해서 이번기회에 다시 정리,,
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자</title>
<style>
/* 1. 태그[속성이름] */
/* 속성명으로 선택했을 경우 */
/* div 태그이면서 class 속성을 가지고 있는 요소 */
div[class] {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
}
/* a 태그이면서 href 속성을 가지고 있는 요소 */
a[href] {
color: gray;
}
/* 2번부터 하나씩 주석을 해제해보며 실습해 보세요 :) */
/* 2. 태그[속성이름="값"] */
/* div 태그이면서 class명이 red인 요소*/
/* 공백을 포함하지 않기 때문에 red 클래스 하나만 가진 요소가 선택됩니다. */
/* div[class="red"] {
background-color: red;
} */
/* 3. 태그[속성이름~="값"] */
/* div 태그이면서 red인 class를 가지고 있는 요소 */
/* 공백을 포함하기 때문에 red 클래스를 가진 요소는 div 태그는 모두 선택됩니다. */
/* div[class~="red"] {
background-color: red;
} */
/* 4. 태그[속성이름*="값"] */
/* div 태그이면서 class 중 red 문자열을 포함하는 요소 */
/* div[class*="red"] {
background-color: red;
} */
/* 5. 태그[속성이름^="값"] */
/* div 태그이면서 class 속성값이 sky로 시작하는 요소 */
/* div[class^="sky"] {
background-color: skyblue;
} */
/* a 태그이면서 href 속성값이 http로 시작하는 요소 */
/* a[href^="https"] {
color: red;
} */
/* 6. 태그[속성이름$="값"] */
/* div 태그이면서 속성값이 pink로 끝나는 요소 */
/* div[class$="pink"] {
background-color: pink;
} */
/* a 태그이면서 href 속성값이 kr로 끝나는 요소 */
/* a[href$="kr"] {
color: black;
} */
/* 6. 태그[속성이름|="값"] */
/* a 태그이면서 href 속성값이 http이거나 http로 시작하는 요소 */
/*
언더바(_), 공백, 합성어가 포함될 경우 적용되지 않으며,
독립된 값이거나 하이픈을 포함하는 값은 선택됩니다.
*/
/* a[href|="http"] {
color: red;
} */
</style>
</head>
<body>
<!-- class 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
<div>1</div>
<div class="red">2</div>
<div class="red pink">3</div>
<div class="redpink skyblue pink">4</div>
<div class="skyblue">5</div>
<hr>
<!-- href 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
<a>바울랩</a>
<a href="http://paullab.co.kr">바울랩1</a>
<a href="http://paullab.com">바울랩2</a>
<a href="https://paullab.com">바울랩3</a>
<a href="http">바울랩4</a>
<a href="http-paullab">바울랩5</a>
</body>
</html>중에서 그나마 편하게 쓸 수 있을 것 같은건
태그[속성이름]태그[속성이름="변수"]태그[속성*="변수"]
정도? 내가 다 까먹을 것 같다..ㅠ
가상 클래스 선택자(Pseudo class selector)
html에 존재하지 않는 클래스지만 마치 클래스가 존재하는것 처럼 작동한다고 하여 가상 클래스 선택자
<ul> <li class="foo">1</li> <!-- .foo:first-child --> <li class="foo">2</li> <li class="foo">3</li> <!-- .foo:nth-child(3) --> <li class="foo">4</li> <li class="foo">5</li> <!-- .foo:last-child --> </ul>
- .foo:first-child : class="foo"인 ****엘리먼트 중 첫번째 자식인 엘리먼트를 선택합니다.
- .foo:last-child : class="foo"인 ****엘리먼트 중 마지막 자식인 엘리먼트를 선택합니다.
- .foo:nth-child(3) : class="foo"인 엘리먼트 중 3번째 자식인 엘리먼트를 선택합니다.
1) .foo:nth-child(odd) : class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 모두 선택합니다.
2) .foo:nth-child(even) : class="foo"인 엘리먼트 중 짝수 번째 자식인 엘리먼트를 모두 선택합니다.
3) .foo:nth-child(n) : class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 모두 선택합니다. n은 0부터 1씩 증가합니다. (0, 1, 2, 3, 4, 5 … )
4) .foo:nth-child(3n) : class="foo"인 엘리먼트 중 3번째 자식마다 모두 선택합니다. (3x0, 3x1, 3x2, 3x3, 3x4, 3x5 … )
5) .foo:nth-child(3n+1) : class="foo"인 엘리먼트 중 3n+1번째 자식인 엘리먼트를 모두 선택합니다. (3x0+1, 3x1+1, 3x2+1, 3x3+1, 3x4+1, 3x5+1 … )- a:visited : 방문한 적이 있는 링크를 선택합니다.
상호작용 위한 가상클래스
:hover사용자가 마우스를 요소 위에 올리면 반응 (모바일에서는 사용 못함)button:hover{ background-color: yellow; }
:active사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용 (누르면 유지되는게 아니라 누르고 있어야 적용됨)a:active{ color: red; }
:focus요소에 포커스가 있을 때, 클릭할 수 있는 요소나 폼컨트롤(input, select 등등)과 같이 상호작용 할 수 있는 모든 요소에는 포커스가 가능:checked체크박스, 라디오 옵션에서 체크되었을 때 적용
가상요소 선택자
::before요소의 맨 첫번째 자식으로 HTML코드에 존재하지 않는 가상요소 하나 생성::after요소의 맨 마지막 자식으로 코드에 존재하지 않는 가상요소 생성/* p 태그의 첫번째 자식으로 텍스트를 생성합니다. */ section::after{ display:block; content:'hello world!'; }요런식으로 사용하거나 가끔 사이드바, 옆에 점 같은거 , list style에 원하는 이미지 넣고 싶을 때도 썼다
::selection사용자가 선택하여 하이라이트 된 상태의 텍스트 선택
🌱 가상 클래스 선택자와 가상 요소 선택자 차이
- 가상 요소 선택자는 콜론이 2개(가상 클래스 선택자는 1개). 간혹 가상요소 선택자에 콜론이 1개만 보이는 경우는 레거시 브라우저 호환을 위한 선택 (Internet Explorer 8이하)
- 가상 요소 선택자는 마크업 없는 요소를 삽입(가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입)
