#02 CSS 선택자와 우선순위

 

단순 선택자

• 전체 선택자 [ * ] : 문서의 모든 요소를 선택한다.

* {property: value;}

• 태그 선택자 [ tagname ] : 지정한 태그 전부를 선택한다.

/* 문서 내의 p 요소를 전부 선택 */
p {property: value;}

• id 선택자 [ #id ] : 해당 id값을 가진 요소를 선택한다.

/* id값이 main_contents인 요소를 선택 */
#main_contents {property: value;}

• class 선택자 [ .class ] : 해당 class값을 가진 요소를 전부 선택한다.

/* class값이 part인 요소를 전부 선택 */
.part {property: value;}

 

★ id 및 class 속성을 정의할 때 주의할 점

• 시작 문자는 영문소문자, $, _만 가능하다.
• $와 _를 제외한 모든 특수문자는 사용할 수 없다.
• 공백 문자(space)는 사용할 수 없다.
• 두 개 이상의 class 속성 값을 줄 때 space로 구분한다.
  ex) <div class="part box"></div>
• 하나의 요소에는 하나의 id값만 가질 수 있으며, 다른 요소의 id값과 중복이 불가능하다.

 

---

결합 선택자

• 자식 선택자 [ > ] : 지정한 요소의 자식 요소 중 해당되는 요소를 전부 선택한다.

/* ul 요소의 자식인 li 요소를 전부 선택 */
ul > li {property: value;}

• 하위 선택자 [ space ] : 지정한 요소의 하위 요소 중 해당되는 요소를 전부 선택한다.

/* id값이 main_contents인 요소의 하위 요소 중 p 요소를 전부 선택 */
#main_contetns p {property: value;}

• 인접 형제 선택자 [ + ] : 지정한 요소의 바로 다음 형제 요소만 선택한다.

/* p 요소의 바로 다음 형제인 div 요소를 선택 */
p + div {property: value;}

• 형제 선택자 [ ~ ] : 지정한 요소의 다음 형제 요소들 중 해당되는 요소 전부를 선택한다.

/* p 요소의 다음 형제 요소들 중 div 요소를 전부 선택 */
p ~ div {property: value;}

• 일치 선택자 : 지정한 조건이 모두 일치하는 요소를 선택한다. 두 가지 조건을 붙여서 작성한다.

/* section의 자식인 div 요소 중 class값이 part인 요소를 전부 선택 */
section > div.part {property: value;}

 

---

가상 클래스 선택자

• 마우스 오버 [ :hover ] : 지정한 요소에 마우스를 올려놓았을 때만 선택한다.

/* ul 요소의 자식인 li 요소 중에 마우스가 올려져있는 요소 */
ul > li:hover {property: value;}

• 마우스 클릭 [ :active ] : 지정한 요소를 클릭하고 놓을 때까지만 선택한다.

/* ul 요소를 클릭하고 놓을때까지 자식인 li 요소를 전부 선택 */
ul:active > li {property: value;}

• 첫 번째 자식 요소 [ :first-child ] : 지정한 요소 중 첫 번째 자식 요소를 선택한다.

/* section 요소의 하위 요소인 p 요소 중 첫 번째 자식 요소만 선택 */
section p:first-child {property: value;}

• 마지막 자식 요소 [ :last-child ] : 지정한 요소 중 마지막 자식 요소를 선택한다.

/* section 요소의 하위 요소인 p 요소 중 마지막 자식인 요소만 선택 */
section p:last-child {property: value;}

외동인 자식 요소는 첫번째 요소이면서 마지막 요소가 된다

 

• n번째 자식 요소 [ :nth-child(n) ] : 지정한 요소 중 n번째 자식만 선택한다.

/* li 요소 중 2번째 자식 요소 선택 */
li:nth-child(2) {property: value;}

• 제외 선택자 [ :not(selector) ] : 지정한 요소들 중 소괄호 안의 선택자를 제외한 모든 요소를 선택한다.

/* section의 자식 요소들 중 div 요소를 제외한 모든 요소 선택 */
section > *:not(div) {property: value;}

 

---

가상 요소 선택자

• 텍스트의 첫 번째 문자 [ :first-letter ] : 지정한 요소의 텍스트 중 첫 번째 문자만 선택한다.

/* p 요소의 텍스트 중 첫번째 문자를 30px 크기에 빨간색으로 지정 */
p:first-letter {
  font-size: 30px;
  color: red;
}

---

 

• 텍스트의 첫 번째 줄 [ :first-line ] : 지정한 요소의 텍스트 중 첫 번째 줄만 선택한다.

/* p 요소의 텍스트 중 첫번째 줄을 30px 크기에 빨간색으로 지정 */
p:first-line {
  font-size: 30px;
  color: red;
}

---

 

• 사용자가 선택한 텍스트 요소 [ ::selection ] : 사용자가 드래그한 텍스트를 선택한다.

/* p 요소 내에 사용자가 선택한 텍스트를 선택 */
p::selection {
  background-color: yellow;
  color: red;
}

---

 

• 앞의 가상 요소 [ ::before ] : 지정한 요소의 바로 앞에 삽입할 콘텐츠를 선택한다.

/* div 요소 바로 앞에 삽입할 콘텐츠를 선택 */
div::before {
  content: '♥';
  color: pink;
}

---

 

• 뒤의 가상 요소 [ ::after ] : 지정한 요소의 바로 뒤에 삽입할 콘텐츠를 선택한다.

/* div 요소 바로 뒤에 삽입할 콘텐츠를 선택 */
div::after {
  content: '♥';
  color: blue;
}

---

 

---

속성 선택자

• selector[ property ] : 지정한 선택자 중 대괄호에 지정한 속성을 갖고 있는 요소를 선택한다.

/* img 요소 중 alt 속성을 갖고 있는 요소를 선택 */
img[alt] {property: value;}

 

• selector[ property="value" ] : 지정한 선택자 중 대괄호에 지정한 속성에 대한 특정값을 갖고 있는 요소를 선택한다.

/* input 요소 중 type 속성이 text인 요소를 전부 선택 */
input[type="text"] {property: value;}

---

CSS에서의 상속

• 상위 요소에 지정한 스타일이 하위 요소에도 적용되는 것
• text 관련 속성들은 대부분 자동으로 상속되며, 상속되지 않는 속성도 있다.
• 하위 요소에 inherit 속성 값을 사용하여 강제로 상속시킬 수 있다.

---

선언의 우선순위 (cascading)

- 같은 선택자로 선언 시 : 선언이 위에서부터 아래로 순차적으로 적용되어 마지막 선언이 우선순위를 갖는다.

- 다른 선택자로 선언 시

• 선택자에 따른 우선순위
  속성값!important > 인라인 정의 > id선택자 > class선택자 > 태그 선택자 > 상속
• 선언 방법에 따른 우선순위
  속성값!important > 인라인 정의 > 내부 정의 > 외부 정의

 

★ 속성 값 뒤에 !important를 붙이면 가장 우선순위가 된다.

p {color: red!important}