전체 선택
*{속성명:속성값}
모든 html요소를 선택하여 속성을 지정해주는 것을 말합니다.
예시
*{
border: 1px solid black;
}
태그 선택자
태그이름{속성:속성값; 속성:속성값;}
해당되는 태그 명을 전부 선택하여 스타일을 적용할 수 있습니다.
예시
h1{
border: 2px solid black;
}
h2{
border: 1px solid green;
}
h3{
border: 2px solid red;
}
ID, Class 선택자
#아이디{속성:속성값};
.클래스명{속성:속성값};
자손 선택자
선택자1 선택자2{속성:속성값;}
부모 태그의 하위 자손(자식/자손)을 선택하여 속성을 지정해주는 것을 의미합니다. 태그 이름 뿐만 아니라 아이디와 클래스를 사용할 수도 있습니다.
예시
<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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<strong>text 요소</strong>
<p>
<strong>자손 text 요소</strong>
</p>
</body>
</html>p strong{
border : 3px solid black;
}
자식 선택자
선택자 1> 선택자2{속성:속성값;}
부모 태그 아래 자식 태그만 선택하여 속성을 지정해주는 것을 말합니다.
예시
<!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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul>
<li>자식 요소
<ol>
<li>
자손 요소</li>
</ol>
</li>
</ul>
</body>
ul의 직계 자식인 li 요소만 선택합니다.
ul > li {
border: 2px solid red;
}
그룹선택자
선택자1, 선택자2{속성:속성값;}
선택자는 다르지만 속성값이 같은 경우, 요소를 묶어 그룹으로 선택할 수 있습니다.
예시
h1,h2{
border:2px solid black;
}
인접 선택자
선택자1 + 선택자2 {속성:속성값;}
앞 요소(선택자1) 바로 뒤에 있는 요소(선택자2)만 선택합니다.
형제 선택자
선택자1 ~ 선택자2{속성:속성값;}
선택자1 아래에 있는 모든 선택자2 요소를 선택합니다.
순서 선택자
선택자1 선택자2:nth-of-type(number)
요소가 나열되는 경우, nth-of-type(순서)를 사용하여 해당 요소의 순서를 입력하여 요소를 선택할 수 있습니다.
예시
//ul>li*3{list$}
<body>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</body>ul li:nth-of-type(1){
border: 2px solid red;
}
ul li:nth-of-type(2){
border: 1px solid blue;
}
수열 선택자
선택자:nth-of-type(수식)
nth-of-type()내에 수식을 집어넣어 해당 요소를 선택해주는 것을 수열 선택자라고 합니다.
예시
@charset "utf-8";
//3배수
ul:nth-of-type(3n) {
border:2px solid black;
}
//홀수
ul:nth-of-type(odd) {
border:2px solid black;
}
//짝수
ul:nth-of-type(even) {
border:2px solid black;
}속성 선택자
선택자[title]{속성:속성값;} - 타이틀 속성이 있는 앵커 태그만을 선택함
선택자[type = "name"]{속성:속성값;} - type이 "name"인 요소를 선택함
예시
input[type="text"]{
border: 1px solid black;
}
가상선택자
선택자 뒤 :가상 이벤트를 붙어 요소를 선택할 수 있습니다.
:link{} - 방문하지 않은 링크
:visited{} - 방문한 링크
:focus{} - 요소에 포커스가 머물러있는 동안
:hover{} - 마우스를 롤오버 하고 있는 동안
:active{} - 마우스를 클릭 또는 키보드 엔터가 눌린 동안
:checked{} - 라디오 버튼/ 체크박스와 같이 체크되는 UI 요소만
:first-child{} - 첫 번째 자식
:last-child{} - 마지막 자식
:first{} - 첫 번째 요소
:last{} - 마지막 요소
::before{} - 요소 시작 지점에 생성된 요소 선택
::after{} - 요소 끝난 지점에 생성된 요소 선택
728x90
반응형
'Programming > CSS&Html&JS' 카테고리의 다른 글
| [CSS] css 정리 (단위, position, float, flex ect) (0) | 2023.03.03 |
|---|---|
| css/js/html 무료로 들을 수 있는 온라인 강의 추천 (0) | 2023.03.01 |
| [Html] 멀티미디어 콘텐츠 태그 (0) | 2023.02.12 |
| [Html] 폼 태그 (0) | 2023.02.12 |
| [html] 목록 태그 (0) | 2023.02.12 |
댓글