1. *
ex)
* {
**margin**: 0;
**padding**: 0;
}
페이지에 있는 전체 요소를 대상으로 함. *를 자주 쓰면 브라우저에 과부하가 걸림. 사용하기에 적절하지 않음.
2. #X
ex)
#container {
**width**: 960px;
**margin**: auto;
}
선택자 앞에 해시(#) 기호를 붙여서 id를 대상으로 삼음. id는 재활용 할 수 없기 때문에 조심스러워야 함
3. .X
ex)
.error {
**color**: red;
}
class 선택자. 여러개의 요소를 대상으로 정할 수 있음. 한 그룹의 요소에 스타일을 적용 할 때 class를 사용함.
4. X Y
ex)
li a {
**text-decoration**: none;
}
descendant 두개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상에 앞쪽 선택자 요소가 존재할 경우 선택. 자손 결합자를 활용하는 선택자를 자손 선택자라고 부름.
5. X
ex)
a { **color**: red; }
ul { **margin-left**: 0; }
type 선택자. type에 따라 모든 요소를 대상으로 삼고 싶을 때 사용
6. X:visited 와 X:link
ex)
a:link { **color**: red; }
a:visted { **color**: purple; }
클릭하기 전 상태의 앵커 태그 전체를 대상으로 하려고 :link 가상 클래스를 사용
:visited 가상클래스로 하기도 함. 이는 클릭했었거나 방문했던 페이지에 있는 태그에 특정한 스타일을 적용 할 수 있음.
7. X + Y
ex)
ul + p {
**color**: red;
}
인접 선택자로 부르는 선택자. 앞의 요소 바로 뒤에 있는 요소만 선택함. 위 예시에서는 ul뒤에 오는 첫번째 단락의 텍스트만 선택됨.
8. X > Y
ex)
div#container > ul {
**border**: 1px solid black;
}
일반 X Y와 X > Y의 차이점은 후자가 ‘직계’ 자식만을 선택한다는 것. 자손의 자식들은 선택되지 않음
9. X ~ Y
ex)
ul ~ p {
**color**: red;
}
이 형제 선택자는 X + Y와 유사하지만 덜 엄격 함. 인접 선택자( + )는 앞의 선택자 바로 뒤에 오는 첫번째 요소만 선택하지만, ~는 예시에서 ul 아래있는 모든 p요소를 선택함.
10. X[title]
ex)
a[title] {
**color**: green;
}
속성 선택자 라고 말하며 예시에서 title 속성이 있는 앵커 태그만을 선택함. title이 없는 앵커 태그에는 특정한 스타일이 적용되지 않음.
11. X[href=”foo”]
ex)
a[href="**[<https://net.tutsplus.com>](<https://net.tutsplus.com/>)**"] {
**color**: #1f6053; /* nettuts green */
}
예시는 https://net.tutsplus.com 로 연결된 전체 앵커 태그에 스타일이 적용됨.
12. X[href="nettuts"]*
ex)
a[href*="tuts"] {
**color**: #1f6053; /* nettuts green */
}
별표는 입력값이 속성값 안 어딘가에 보여야 한다는 것을 표시함. 예시처럼 작성되었을 경우
nettuts.com, net.tutsplus.com tutsplus.com 등 tuts가 포함되는 url모두를 포함함
13. X[href^="http"]
ex)
a[href^="http"] {
**background**: url(path/to/external/icon.png) no-repeat;
**padding-left**: 10px;
}
캐럿기호 ^는 문자열의 시작을 표기하는 정규 표현식에서 흔히 사용됩니다.
14. X[href$= “.jpg”]
ex)
a[href$=".jpg"] {
**color**: red;
}
예시는 문자열 끝에 적용하도록 정규 표현식 기호인 $를 사용.
15. X****[data-="foo"]***
ex)
a[data-filetype="image"] {
**color**: red;
}
여러가지 이미지 형식을 어떻게 적용할때
ex)
<**a** href="path/to/image.jpg" data-filetype="image"> Image Link </**a**>
a[data-filetype="image"] {
**color**: red;
}
위 예시처럼 해당 앵커만 대상으로 삼는 속성 선택자를 사용할 수 있음
16. X[foo~="bar"]
ex)
a[data-info~="external"] {
**color**: red;
}
a[data-info~="image"] {
**border**: 1px solid black;
}
~를 이용하면 띄어쓰기로 구분되는 값이 있는 속성을 대상으로 할 수 있음.
ex)
"<**a**href="path/to/image.jpg" data-info="external image"> Click Me, Fool </**a**>
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
**color**: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
**border**: 1px solid black;
}
17. X:checked
ex)
input[type=radio]:checked {
**border**: 1px solid black;
}
라디오 버튼이나 체크박스처럼 체크되는 사용자 인터페이스 요소만을 대상으로 함.
18. X:after
ex)
.clearfix:after {
**content**: "";
**display**: block;
**clear**: both;
**visibility**: hidden;
**font-size**: 0;
**height**: 0;
}
.clearfix {
***display**: inline-block;
**_height**: 1%;
}
선택된 요소 주변에 콘텐츠를 생성함. 요
19. X:hover
ex)
div:hover {
**background**: #e3e3e3;
}
사용자가 요소 위에 커서를 올릴 때 특정할 스타일을 적용 하고 싶을 때 사용
20. X:not(선택자)
ex)
div:not(#container) {
**color**: blue;
}
예시는 모든 div를 선택하고 싶은데, 그중에서 id가 container인 것만 제외하고 싶을 때
21. X::가상요소
ex)
p::first-line {
**font-weight**: bold;
**font-size**: 1.2em;
}
첫 번째 줄이나 첫 글자와 같이 요소 일부분에 스타일을 적용하는데 가상요소(::)를 사용할 수 있음. 효과를 보려면 이요소를 반드시 블록 레벨 요소에 적용해야 함
22. X:nth-child(n)
ex)
li:nth-child(3) {
**color**: red;
}
nth-child는 변수값을 정수로 받음. 1부터 시작. 두번째 항목을 대상으로 하려면 li:nth-child(2)로 작성4번째마다 선택하려면 li:nth-child(4n)으로 작성
23. X:nth-last-child(n)
ex)
li:nth-last-child(2) {
**color**: red;
}
끝에서 두 번째 항목만 선택할 때. 22번과 비슷하지만 집합의 끝에서 부터 출발하면서 동작하는 것이 다름
24. X:nth-of-type(n)
ex)
ul:nth-of-type(3) {
**border**: 1px solid black;
}
child를 선택하지 않고 요소의 type을 선택하고 싶을 때
예시는 세번 째 ul에만 스타일을 지정함
25. X:nth-last-of-type(n)
ex)
ul:nth-of-type(3) {
**border**: 1px solid black;
}
집합의 끝에서 출발해 지정한 요소를 대상으로함
26. X:first-child
ex)
ul li:first-child {
**border-top**: none;
}
부모 요소의 첫 번째 자식만 선택함. 목록에서 맨 처음과 맨 나중 항목에서 테두리 선을 제거하는데 이 방식을 흔히 사용함.
27. X:last-child
ex)
ul > li:last-child {
**color**: green;
}
부모 요소의 마지막 자식만 선택함
28. X:only-child
ex)
div p:only-child {
**color**: red;
}
부모의 단 하나의 자식 요소를 지정할 수 있음
ex)
<**div**><**p**> My paragraph here. </**p**></**div**>
<**div**>
<**p**> Two paragraphs total. </**p**>
<**p**> Two paragraphs total. </**p**>
</**div**>
두 번째 div 문단은 대상이 되지 않고 오직 첫번째 div가 대상이 됨. 하나 이상의 자식을 요소에 적용하는 순간 only-child 가상 클래스 효과는 사라지게 됨
29. X:only-of-type
ex)
li:only-of-type {
**font-weight**: bold;
}
형제 요소가 없는 요소를 대상으로 함 예로 단 하나의 목록 아이템인 ul 전부를 대상으로 삼음.
30. X:first-of-type
ex) 가상 클래스로 해당 type의 첫 번째 형제 선택자를 선택할 수 있음