[CSS]선택자 종류와 사용법

✨ UI/💙 CSS

[CSS]선택자 종류와 사용법

뉴이 NUEY 2024. 12. 23. 02:59

HTML에 적은 선택자를 CSS에서 사용하는 방법에 대해 알아보겠습니다.

2024.12.22 - [✨ UI/💗 HTML] - [HTML]선택자 selector. id, class, name

#id명 { }
.class명 { }

🌟 id와 class 선택자는 jquery에서도 #와 .로 동일하게 사용되기에 기억해두는 편이 좋습니다.

선택자 우선순위

속성 값 뒤에 !important를 붙인 속성
```
.important {
  color: red !important;
}
```

인라인 스타일

<p style="color: blue;">This is a paragraph.</p>

#id로 지정된 속성
```
#unique {
  color: green;
}
```

class, attribute, 및 pseudo-class로 지정된 속성

.class-name {
  color: purple;
}

input[name="reply"] {
  background-color: yellow;
}

a:hover {
  color: orange;
}

태그 이름(타입)으로 지정된 속성
```
p { font-size: 14px; }
```

그 외 선택자들

선택자 우선순위가 있기에, 또 다양한 선택자 작성법이 있습니다.

* { }
전체 선택자
→ 화면 내 모든 태그에 영향을 줍니다.
tag > tag
자식선택자
→ 태그 안에 있는 태그를 찾아 선택합니다.
1. id가 at인 아티클 안에 div가 있다. 또 그 안에 p태그가 있다. 이것을 코드로 만들면 #at>div>p{}가 된다.
2. #at > p{ } 코드는 div태그 안에 있는 p태그까지는 영향을 미치지 못하고, at아티클 태그 바로 안에 있는 p태그에만 영향을 미친다.
tag tag
하위 선택자
tag tag 중간에 >없이 적게 되면 하위선택자가 되어 p태그 안에 들어가있는 span 태그도 영향을 받는다. 한마디로 자식선택자>와 다르게 태그 안에 태그가 들어가 있어도 영향 받지 않는다.
tag[ ]
속성 선택자
- tag 속성 값으로 지정된 것들을 변경할 수 있다.
- tag[id]{ }는 tag속성에 id가 들어간 모든 태그들을 변경하고
- tag[id="아이디명"]{ }은 지정된 아이디명이 적힌 tag만 수정된다.
1. [attribute] : attribute라는 속성을 가지고 있는 요소들을 선택
2. [attribute=value] : 속성값과 일치하는 요소들을 선택
3. [attribute~=value] : 속성값과 일치하는 요소들을 선택, 공백으로 구분하여 포함된 속성값도 선택
4. [attribute |= value] : 속성값으로 시작하는 요소들을 선택, 하이픈(-)으로 구분하여 포함된 속성값도 선택
5. [attribute ^= value] : 속성값으로 시작하는 요소들을 선택
6. [attribute $= value] : 속성값으로 끝나는 요소들을 선택
7. [attribute *= value] : 속성값을 포함하고 있으면 선택 (위치 상관 없음)

tag:
가상 클래스 선택자

<article>
	<h3>가상 클래스 선택자</h3>
		<ul>
			<li>특정 이벤트가 발생한 태그 선택!</li>
			<li><a href="http://www.naver.com">네이버</a></li>
			<li><a href="http://qclass.iptime.org:8686/kh/hangul.html">시계</a></li>
			<li><input type="checkbox" />체크하면 효과 적용</li>
		</ul>
</article>