[CSS] CSS Selector

:before, :after (가상 선택자)

:before : object 요소 내 처음 추가할 가상 태그
:after : object 요소 내 마지막 추가할 가상 태그

CSS Code:

.object:before { content: "test"; display:block; }
.object:after { content: "test"; display:block; }

IE6/IE7

http://cssuseragent.org Library

    .object {
        .ua-ie-6 &, .ua-ie-7 & {
            zoom: expression(
                this.runtimeStyle.zoom="1",

                /* ::before polyfill - creates <i class="before"></i> */
                this.insertBefore( document.createElement("i"), this.firstChild ).className="before",

                /* ::after polyfill - creates <i class="after"></i> */
                this.appendChild( document.createElement("i") ).className="after"
            );
        }

        /* User Style*/
        &:before, .before { content:"", display: block; }
        &:after, .after { content:"", display: block; }
    }
    

:first-child

object 객체 중 첫번째 객체에만 스타일 적용

CSS Code:

.object:first-child { background: red }

IE6/IE7

.class li { border: expression(this.previousSibling ==null? 'red' : 'inherit');}

:last-child

object 객체 중 마지막 객체에만 스타일 적용

CSS Code:

.object:last-child { background: red }

IE6/IE7

.class li { border: expression(this.nextSibling==null? 'red' : 'inherit');}

:nth-child(n) 1

object 객체 중 n번째 객체에 스타일 적용

nth-child(odd)

object 객체 중 홀수번째 객체에만 스타일 적용

CSS Code:

.object:nth-child(odd) { background: red }

nth-child(even)

object 객체 중 짝수번째 객체에만 스타일 적용

CSS Code:

.object:nth-child(even) { background: red }

:nth-of-type(n) 2

object 객체 중 n번째 객체에 스타일 적용

nth-of-type(odd)

object 객체 중 홀수번째 객체에만 스타일 적용

CSS Code:

.object:nth-of-type(odd) { background: red }

nth-of-type(even)

object 객체 중 짝수번째 객체에만 스타일 적용

CSS Code:

.object:nth-of-type(even) { background: red }

  1. nth-child – 찾고자 하는 엘리먼트와 상관없이 해당 노드에 포함된 자식 엘리먼트 대상으로 순번을 체크한다. 
  2. nth-of-type – 해당 노드에 포함된 것 중 찾고자 하는 엘리먼트에만 순번을 체크한다.