[css] 선택자

이 글을 부스트코스 강의를 기반으로 작성하였습니다.

기본 선택자

전체 선택자

*(asterisk) 기호는 문서 내에 모든 요소를 선택한다.

* {collor: blue}

요소 선택자(태그 선택자)

태그명을 선택하여 사용한다.

h1{color:white}

클래스 선택자(.)

.foo {font-size: 30px}

아이디 선택자(#)

#bar {background-color: yellow}

그룹화

선택자는 쉼표를 이용해서 그룹화 할 수 있다.

h1, h2, h3 {color: black}

선택자 조합

선택자 조합은 나열된 선택자 조건이 모두 부합한 경우의 요소에만 적용이 된다.

요소와 클래스의 조합

p.bar {...}

p 태그이면서 bar 클래스인 요소에만 적용이 된다.

다중 클래스

.foo.bar {...}

클래스에 foo 와 bar 를 모두 갖고 있는 요소에만 적용이 된다.

아이디와 클래스의 조합

#foo.bar {...}

아이디는 foo 이면서 클래스는 bar인 요소에만 적용이 된다.

속성 선택자

단순 속성으로 선택

p[class] {...}     /* p요소이면서 클래스 속성이 있는 요소 */
p[class][id] {...} /* p요소이면서 클래스와 아이디 속성이 있는 요소*/

정확한 속성값으로 선택

p[class="foo"] {...} /* p요소이면서 클래스가 foo인 요소 */
p[id="title"] {...}  /* p요소이면서 아이디가 title인 요소 */

부분 속성값으로 선택

• [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
• [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
• [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
• [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

/* HTML */
/* 1번 */
<p class="color hot">red</p>
/* 2번 */
<p class="cool color">blue</p>
/* 3번 */
<p class="colorful nature">rainbow</p>

p[class~="color"] {...} /* 1번과 2번에 적용이 된다.*/ 
p[class^="color"] {...} /* 1번과 3번에 적용이 된다.*/
p[class$="color"] {...} /* 2번에만 적용이 된다. */
p[class*="color"] {...} /* 1번, 2번, 3번 모두 적용이 된다. */

문서 구조와 관련된 선택자

자손 선택자(공백)

div span {...} /* div요소의 자손들중에 모든 span요소에 적용 */

자식 선택자(>)

div > span {...} /* div요소의 자식중에 모든 span요소에 적용 */
div>span {...}   /* 꺽쇠 앞뒤로 공백은 있어도 없어도 상관없다.*/

형제 선택자(~)

div ~ span {...} /* div요소의 형제들중에 모든 span요소에 적용 */
div~span {...}   /* 물결 앞뒤로 공백은 있어도 없어도 상관없다.*/

인접 형제 선택자(+)

div + span {...} /* div요소의 인접한 span요소에만 적용 */
div+span {...}   /* 플러스 앞뒤로 공백은 있어도 없어도 상관없다.*/

조합해서 사용

body > div table + ul {...}
/* body요소의 자식들중에서 div 
 * div요소의 자손들중에서 table
 * table요소와 인접한 ul에만 적용이 된다.
 */

가상 선택자

가상 클래스

선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정할 수 있다. 이를 가상(추상)클래스라고 한다. 실제 클래스 속성은 없지만 내부적으로 가상 클래스가 적용되어 동작한다.

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 입력으로 활성화된 요소
• :focus - 포커스 되었을 때 (input 태그 등)
• :first - 첫번째 요소
• :last - 마지막 요소
• :first-child - 첫번째 자식
• :last-child - 마지막 자식
• :nth-child(2n+1) - 홀수 번째 자식

li:first-child {...}     /* li요소들중에 첫번째 li요소 */
li:last-child {...}      /* li요소들중에 마지막 li요소 */
li:nth-child(2n-1) {...} /* li요소들중에 홀수번째 li요소 */
a:link {...}             /* 아직 방문하지 않은 a요소 */
a:hover {...}            /* a요소 위에 마우스를 올렸을 때 */

가상 요소

가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택한다.

• ::first-line - 요소의 첫번째 줄을 선택한다.

p::first-line {
  color: red;
}

p 요소의 첫번째 줄의 글자색을 빨간색으로 만든다.

• ::first-letter - 요소의 첫번째 문자를 선택한다.

p::first-letter {
  color: red;
}

p 요소의 첫번째 문자의 색을 빨간색으로 만든다.

• ::before - 요소의 앞을 선택한다.

p::before {
  content: "xyz";
  color: red;
}

p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색으로 만든다.

• ::after - 요소의 뒤를 선택한다.

p::after {
  content: "xyz";
  color: red;
}

p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로 만든다.

• ::selection - 마우스 드래그 등으로 선택한 텍스트를 선택한다.

p::selection {
   background: red;
   color: #fff;
}

p태그 감싸여진 글을 드래그 해보면 배경색과 글자색이 변경된다.