it개발자스터디공간

웹표준 html,css,javascript 실무 과정 자료] :not()

웹표준 html,css,javascript 실무 과정 자료] :not()

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:not()

■ () 안에 지정된 셀렉터와 일치하지 않는 요소에 스타일을 적용

■ p:not(.sample) {

   color: navy;

    }

☞ ‘class=“sample”’ 이 지정되지 않은 p요소에 스타일을 적용

웹표준 html,css,javascript 실무 과정 자료] :empty

웹표준 html,css,javascript 실무 과정 자료] :empty

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:empty

■ 자식 요소나 요소 내용을 갖지 않는 요소에 스타일 적용

■ td:empty {

   background: gray;

   }

☞ 셀의 내용이 공백 <td></td>인 경우 스타일이 적용

웹표준 html,css,javascript 실무 과정 자료] :only-of-type

웹표준 html,css,javascript 실무 과정 자료] :only-of-type

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:only-of-type

■ 동일한 부모 요소를 갖는 형제 요소 중에서 지정한 요소가 하나 밖에 없는 경우

■ 문맥상 :first-of-type, :last-of-type, nth-of-type (1), :nth-last-of-type (1)과 같음

웹표준 html,css,javascript 실무 과정 자료] :only-child

웹표준 html,css,javascript 실무 과정 자료] :only-child

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:only-child

■ 지정한 요소가 부모 요소 안에서 유일한 자식 요소인 경우 스타일을 적용

■ 문맥상 :first-child, :last-child, nth-child(1), :nth-last-child(1)과 같음

웹표준 html,css,javascript 실무 과정 자료] :last-of-type

웹표준 html,css,javascript 실무 과정 자료] :last-of-type

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:last-of-type

■ 지정한 요소가 부모 요소 안에서 맨 마지막 자식 요소에 스타일 적용

■ 나머지는 :first-of-type 과 같음

웹표준 html,css,javascript 실무 과정 자료] :first-of-type

웹표준 html,css,javascript 실무 과정 자료] :first-of-type

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:first-of-type

■ 지정한 요소가 부모 요소 안에서 맨 처음 자식 요소에 스타일 적용

■ 다른 종류의 형제 요소가 앞에 있는 경우에도 ‘요소명’에 지정한 요소를 대상으로 함.

■ nth-of-type(1) 과 같음

■ p:first-of-type {

   color: blue;

   text-style: italic;

    }

☞ 동일한 부모 요소 안에서 맨 처음 나타나는 p요소에 대해서만 스타일이 적용

웹표준 html,css,javascript 실무 과정 자료] :first-child  :last-child

웹표준 html,css,javascript 실무 과정 자료] :first-child  :last-child

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:first-child  :last-child

■ 요소명 :first-child   지정한 요소가 부모 요소 안에서 맨 처음 자식 요소인 경우 스타일 적용

  :nth-child(1) 과 같음

■ 요소명 :last-child   지정한 요소가 부모 요소 안에서 맨 마지막 자식 요소인 경우 스타일 적용

   nth-last-child(1) 과 같음

웹표준 html,css,javascript 실무 과정 자료] :nth-last-of-type()

웹표준 html,css,javascript 실무 과정 자료] :nth-last-of-type()

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:nth-last-of-type()

■ 동일한 부모 요소 안에서 뒤에서 n번째 자식 요소마다 스타일 적용

■ 다른 종류의 형제 요소가 있는 경우에도 ‘요소명’에 해당하는 요소만을 셈

■ 나머지는 nth-of-type()과 동일