최신 웹 개발 튜토리얼
 

CSS의사 요소

❮ 이전 다음 장 ❯

의사 요소 무엇입니까?

CSS 의사 요소는 요소의 스타일 지정 부분에 사용된다.

예를 들어,이 할 수 있습니다 :

  • 요소의 첫 글자 또는 선 스타일
  • , 요소의 컨텐츠를하기 전에 내용을 삽입, 또는 후

통사론

의사 요소의 구문 :

selector::pseudo-element {
    property:value;
}
노트 - 이중 콜론 표기주의 ::first-line 대 :first-line

이중 콜론은 CSS3의 의사 요소에 대한 단일 콜론 표기를 교체했다. 이것은 의사 클래스와 가상 요소를 구별하기 위해 W3C에서 시도였다.

단일 콜론 구문은 의사 클래스와 CSS2와 CSS1에서 의사 요소를 모두 사용 하였다.

이전 버전과의 호환성을 위해 단일 콜론 구문은 CSS2와 CSS1 의사 요소에 대한 허용됩니다.

::first-line 의사 요소

::first-line 의사 요소는 텍스트의 첫 줄에 특별한 스타일을 추가하는 데 사용됩니다.

다음 예는 모든 텍스트의 첫 번째 행의 서식 <p> 요소를 :

예

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
»그것을 자신을 시도

주 : ::first-line 가상 요소는 요소 레벨의 블록에 적용될 수있다.

다음과 같은 속성이 적용 ::first-line 의사 요소 :

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter 의사 요소

::first-letter 가상 요소는 텍스트의 첫 글자에 특별한 스타일을 추가하는 데 사용됩니다.

다음 예는 모든 텍스트의 첫 번째 문자의 형식을 <p> 요소를 :

예

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
»그것을 자신을 시도

주 : ::first-letter 가상 요소는 요소 레벨의 블록에 적용될 수있다.

다음과 같은 속성이 적용 ::first-letter pseudo- 요소 :

  • font 속성
  • color 속성
  • background 속성
  • margin 속성
  • padding 속성
  • border 속성
  • text-decoration
  • vertical-align (경우에만 "float" 입니다 "none" )
  • text-transform
  • line-height
  • float
  • clear

의사 요소와 CSS 클래스

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

예

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}
»그것을 자신을 시도

위의 예와 단락의 첫 글자가 표시됩니다 class="intro" 빨간색과 큰 크기를.

여러 의사 요소

몇몇 의사 요소는 또한 결합 될 수있다.

다음 예에서, 단락의 첫 글자는 XX-큰 글꼴 크기, 빨간색 될 것입니다. 첫 번째 줄의 나머지 부분은 파란색, 그리고 작은 모자에있을 것입니다. 단락의 나머지는 기본 글꼴 크기 및 색상 될 것입니다 :

예

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

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
»그것을 자신을 시도

CSS - ::before 의사 요소

::before 가상 요소는 요소의 내용 전의 일부 콘텐츠를 삽입하는데 사용될 수있다.

다음의 예는 각각의 내용 이전에 이미지 삽입 <h1> 요소를 :

예

h1::before {
    content: url(smiley.gif);
}
»그것을 자신을 시도

CSS - ::after 의사 요소

::after 가상 요소는 요소의 내용 후 일부 콘텐츠를 삽입하는데 사용될 수있다.

다음의 예는 각각의 내용 후 이미지 삽입 <h1> 요소를 :

예

h1::after {
    content: url(smiley.gif);
}
»그것을 자신을 시도

CSS - ::selection 의사 요소

::selection 가상 요소는 사용자에 의해 선택된 요소의 부분 일치한다.

다음 CSS 속성에 적용 할 수 있습니다 ::selection : color , background , cursor , 및 outline .

다음은 노란색 배경에 선택한 텍스트 빨간한다 :

예

::selection {
    color: red;
    background: yellow;
}
»그것을 자신을 시도

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3»

모든 CSS 의사 요소

선택자 예 예 설명
::after p::after 각 <P> 요소의 내용 이후에 뭔가를 삽입
::before p::before 각각의 내용 이전에 무언가를 삽입 <p> 요소
::first-letter p::first-letter 각각의 첫 글자 선택 <p> 요소를
::first-line p::first-line 각각의 첫 번째 행 선택 <p> 요소를
::selection p::selection 사용자에 의해 선택된 요소의 일부를 선택

모든 CSS 의사 클래스

선택자 예 예 설명
:active a:active 활성 링크를 선택합니다
:checked input:checked 모든 선택 선택 <input> 요소를
:disabled input:disabled 모든 장애인 선택 <input> 요소를
:empty p:empty 모든 선택 <p> 아이가없는 요소를
:enabled input:enabled 모든 사용 선택 <input> 요소를
:first-child p:first-child 모든 선택 <p> 부모의 첫 번째 자식 요소를
:first-of-type p:first-of-type 모든 선택 <p> 이 처음이다 요소 <p> 부모의 요소를
:focus input:focus 선택 <input> 포커스가있는 요소를
:hover a:hover 이상 마우스의 링크를 선택합니다
:in-range input:in-range 선택 <input> 지정된 범위 내의 값을 갖는 요소
:invalid input:invalid 모든 선택 <input> 잘못된 값을 가진 요소를
:lang(language) p:lang(it) 모든 선택 <p> lang 속성 값으로 시작하는 요소를 "it"
:last-child p:last-child 모든 선택 <p> 부모의 마지막 자식 요소를
:last-of-type p:last-of-type 모든 선택 <p> 마지막 인 요소 <p> 부모의 요소를
:link a:link 모든 방문하지 않은 링크를 선택합니다
:not(selector) :not(p) 하지 않은있는 모든 요소 선택 <p> 요소를
:nth-child(n) p:nth-child(2) 모든 선택 <p> 부모의 두 번째 자식 요소를
:nth-last-child(n) p:nth-last-child(2) 모든 선택 <p> 마지막 아이부터 계산, 부모의 두 번째 자식 요소를
:nth-last-of-type(n) p:nth-last-of-type(2) 모든 선택 <p> 두 번째 인 요소 <p> 마지막 아이부터 계산, 부모의 요소를
:nth-of-type(n) p:nth-of-type(2) 모든 선택 <p> 두 번째 인 요소 <p> 부모의 요소를
:only-of-type p:only-of-type 모든 선택 <p> 만입니다 요소 <p> 부모의 요소를
:only-child p:only-child 모든 선택 <p> 부모의 유일한 자식 요소를
:optional input:optional 선택 <input> 아니오 요소 "required" 속성
:out-of-range input:out-of-range 선택 <input> 지정된 범위를 벗어난 값을 가진 요소
:read-only input:read-only 선택 <input> A의 요소 "readonly" 속성이 지정
:read-write input:read-write 선택 <input> 아니오 요소 "readonly" 속성
:required input:required 선택 <input> A의 요소 "required" 지정된 속성
:root root 문서의 루트 요소를 선택합니다
:target #news:target 현재 활성 선택 #news (즉 앵커의 이름이 포함 된 URL 클릭) 요소를
:valid input:valid 모든 선택 <input> 유효한 값을 가진 요소를
:visited a:visited 모든 방문한 링크를 선택합니다

❮ 이전 다음 장 ❯