CSS 치트키 4) CSS Selector 선택하기

CSS Selector

여러 기능을 통해 CSS 적용할 대상을 섬세하게 지정할 수 있다. 

Combination

여러 엘리먼트들의 스타일을 더! 더! 더! 세부적으로 선택하고 싶다면? Combination이 답!

Combination: 셀렉터 간의 관계를 나타냅니다!

- descendant selector (space): 자손태그 모두!

- child selector (>): 아들태그만 (바로 밑 아들만)

- adjacent sibling selector (+): 뒤에 바로 오는 태그

- general sibling selector (~): 뒤에 오는 태그 모두

Pseudo-class: 엘리먼트 단위의 상태 제어

기본적으로는 엘리먼트 단위로 상태를 제어한다.

selector:pseudo-class {
    property:value;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

Pseudo-element: 엘리먼트 (태그) 안에서 특정 대상 단위의 상태 제어 

엘리먼트 안에서 (자주필요한) 특정 대상에 대해서 제어할 수 있도록 도와준다.

샘플들을 보면  왠지 예전 영자신문에서 많이 보였던 글 서식들을 떠올리게 된다 :0

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

h1::after, h1::before {
    content: url(smiley.gif);
}

::selection {
    color: red; 
    background: yellow;

}

CSS Attribute Selector: 태그 안의 특성을 가지고있는지 여부로 제어

엘리먼트가 가진 Attribute 속성 값에 따라 제어한다.

같은 input 태그 안의 각자 기능을 하는 태그에 대해서 별도로 CSS를 적용하고 있다 (감동 ㅠ_ㅠ)

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}