class 선택자를 사용한 적용

지정한 클래스 전체 적용

h2 태그에 class가 title인 스타일입니다.

p 태그에 class가 title인 스타일입니다.

멀티 조건에 따른 적용

• color: red;
• font-weight: bold;

ID 선택자를 사용한 적용

• color: blue;
• font: 2em sans-serif;
• background-color: yellow;

ID가 p01인 p 태그의 스타일입니다.

group 선택자

• color: #fff;
• background-color: green;

ID가 p02인 p 태그의 스타일입니다.

ID가 p03인 p 태그의 스타일입니다.

ID가 p04인 p 태그의 스타일입니다.

ID가 p05인 p 태그의 스타일입니다.

자식/자손 선택자

div 내부의 모든 p에 적용

ul 바로 아래 li에만 적용

상태(가상 클래스) 선택자

link 태그 a의 상태에 따른 스타일 적용

form 태그 input의 상태에 따른 스타일 적용 : focus

form 태그 input의 상태에 따른 스타일 적용 : disabled

form 태그 input의 상태에 따른 스타일 적용 : required

form 태그 input의 상태에 따른 스타일 적용 : checkbox checked

form 태그 input의 상태에 따른 스타일 적용 : radio checked

구조/위치 기반 선택자

1. 맨위의 Head 배경색 적용 (맨 앞의 컬럼은 배경색에 !important 적용)
2. 짝수번째 배경색 적용
3. 맨앞 컬럼의 색/width 적용
4. 맨뒤 컬럼의 width 적용
5. 두번째 컬럼의 font color 적용
6. 같은 타입(td) 중 3번째 항목에 font color 적용

가상요소 선택자

div>p::first-letter

• font-size: 2em;
• font-weight: bold;
• color: #000;

button::after

• content: " →";

strong::before

• content: ">> ";

div::selection

• div::selection { background: yellow; color: black;}

속성 선택자

input 태그 중 placeholder 속성을 가진 모든 요소 (input[placeholder])

• background: mediumspringgreen !important;
• color: #000;
• font: 2em sans-serif;

지정한 속성이 정확히 일치하는 요소 (a[target="_top"])

• font: 2em 'arial black';
• font-weight: bold;

속성의 값이 지정한 문자열로 시작하는 요소 (input[type^="fi"])

• font: 1rem '굴림체';
• background-color: #f5cbcb;
• border-radius: 5px;
• width: 500px;

속성의 값이 지정한 문자열로 끝나는 요소 (img[src$="avif"])

• border: 1px solid #000;
• background-color: #efefef;
• padding: 20px;

속성의 값이 지정한 문자열을 포함하는 요소 (img[class*="animation"])

• position: relative;
• animation: moveX 2s infinite alternate ease-in-out;
• @keyframes moveX { from { left: 0px; } to { left: 100px; } }

멀티 클래스 적용

• .item {width: 40px; height: 40px; text-align: center; padding: 10px 5px 0 5px;}
• .item1 {background-color: #b39ddb;}
• .item2 {background-color: #9fa8da;}
• .item3 {background-color: #90caf9;}

z-index

미적용

적용