CSS 선택자

미분류

CSS 선택자

타입 선택자

  • HTML Tag 를 지정하여 선언.
/* 타입 선택자 */
h1 {font-size:20px}
ul {overflow:hidden}
a {color:red}
p {text-decoration:underline}

ID, CLASS 선택자

  • 엘리먼트에 직접 id, class 선택자 명을 지정
  • id는 #으로 구분, class는 .(점)으로 구분
/* ID, CLASS 선택자 */
#bodyContent {width:100%}
.clr {clear:both}
.datetime {font-size:10px}
#divNews .tab1 {width:50px;height:50px}
#divNews ul {background-color:red}

하위 선택자

  • 특정 엘리먼트 하위의 엘리먼트를 지정할 때 사용
  • 공백(space)으로 구분함
  • 타입, ID, CLASS 선택자와도 함께 사용 가능
/* 하위 선택자 */
ul li {height:30px}
ul li a {color:red}
table tr td {text-align:left}

자식 선택자

/* 자식 선택자 */
div > a {font-size:20px}

속성 선택자

/* 속성 선택자 */
[class='box'] {background-color:red}

인접 선택자

/* 인접 선택자 */
h1 + div {background-color:blue}

그룹 선택자

  • 콤마(,) 로 선택자를 추가 할 수 있다.
  • 선언된 모든 선택자에 스타일이 적용된다.
/* 그룹 선택자 */
#wrap, .list_cont {overflow:hidden}

전체 선택자

  • 모든 태그에 대한 속성을 지정 할 수 있으나, 사용빈도가 매우 낮음
  • 선언은 *(별표) 로 선언
/* 전체 선택자 */
* {color:red}
div * {font-size:10px}

유사클래스 선택자

  • 해당 엘리먼트의 상태에 따라 구분짓는 선택자
  • HTML 문서 상에는 없으나 CSS에서는 존재하는 것처럼 작성
  • IE6에선 a태그에만 지정이 가능하고 그 외 브라우저는 지원여부가 조금씩 다름
/* 유사클래스 선택자 */
a:link {color:blue;text-decoration:none} /* 방문하지 않은 링크 */
a:visited {color:red;text-decoration:none} /* 방문했던 링크 */
a:hover, a:active {color:black;text-decoration:underline} /* 마우스 오버시와 클릭시 */

CSS Cascading

  • 두개 이상의 규칙이 동일한 엘리먼트에 적용될 때 각 규칙의 우선순위에 따라 동작을 부여하는 방식으로
    각 선택자에 따른 환산값은 아래 표와 같으며 높은 환산 값을 가진 규칙이 적용된다.
선택자 10진수 환산값 예
inline style 1000 style=”margin-left:10px”
id 100 #Header {width:100%}
class 10 .info {width:100%}
element 1 ul {margin:0}


[참고] 속성 선언뒤 !important 를 선언하면 우선순위에 상관없이 우선 적용된다.

.info {width:100% !important}

출처 : 다룸 [ http://darum.daum.net]