CSS 의사 요소

이전 : CSS 의사 클래스

다음 : CSS 탐색 모음

CSS 의사 요소는 몇 가지 특수 효과 선택기를 추가하는 데 사용됩니다.

문법

의사 요소 구문 :

selector:pseudo-element {property:value;}

CSS 클래스는 유사 요소를 사용할 수있다 :

selector.class:pseudo-element {property:value;}

첫째 줄 의사 요소

"첫 번째 줄"의사 요소는 텍스트의 첫 번째 줄에 특별한 스타일을 설정하는 데 사용됩니다.

다음 예에서, 브라우저는 텍스트 요소 p 포맷의 제 1 라인의 스타일 "첫번째 행"가상 요소에 기초 할 것이다 :

예

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

»시도

주 : "첫번째 행"가상 요소 만 블록 레벨 요소에 사용될 수있다.

참고 : 다음과 같은 속성이 "첫 번째 줄"의사 요소에 적용 할 수 있습니다 :

글꼴 속성
색상 속성
배경 속성
단어 간격
자간
텍스트 장식
수직 정렬
텍스트 변환
라인 높이
맑은

: first-letter 가상 요소

"첫 글자"의사 요소는 텍스트의 첫 글자에 특별한 스타일을 설정하는 데 사용됩니다

예

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

»시도

참고 : "첫 번째 문자"의사 요소 만 블록 수준 요소에 사용할 수 있습니다.

참고 : 다음과 같은 속성이 "첫 번째 문자"의사 요소에 적용 할 수 있습니다 :

글꼴 속성
색상 속성
배경 속성
마진 속성
패딩 속성
테두리 속성
텍스트 장식
수직 정렬 ( "부동"인 경우에만 "없음")
텍스트 변환
라인 높이
플로트
맑은

의사 요소와 CSS 클래스

의사 요소 CSS 클래스와 결합 될 수있다 :

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

단락 문서의 첫 글자가 빨간색으로 변으로 위의 예는 모든 클래스를 만들 것입니다.

여러 의사 요소

의사 복수의 원소를 사용하기 위해 결합 될 수있다.

다음 예에서 문자의 첫 번째 단락은 빨간색으로 표시됩니다, 글꼴 크기는 XX-크다. 나머지 텍스트의 첫 번째 라인은 파란색, 작은 대문자 될 것입니다.

디스플레이에 기본 글꼴 크기와 색상의 텍스트의 나머지 단락 :

예

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

»시도