CSS Pseudo-Classes에 대한 확실한 가이드
초보자 이건 경험이 많은 CSS 개발자이든, 아마 들어봤을 것입니다. 가상 클래스. 가장 잘 알려진 가상 클래스는 아마도 : 마우스 오버, 요소를 스타일링 할 수있게 해줍니다. 호버 상태에서, 즉, 마우스와 같은 포인터 장치가 포인팅 될 때.
이전 게시물 인 margin : auto 및 CSS Floats의 개념에 따라이 게시물의 의사 클래스에 대해 자세히 살펴 봅니다. 우리는 보게 될 것이다. 의사 클래스가 실제로 무엇인지, 어떻게 작동하는지, 어떻게 카테고리를 분류 할 수 있는지, 그들이 의사 요소와 어떻게 다른지.
가짜 클래스 란 무엇인가??
의사 클래스는 CSS 선택자에 추가 할 수있는 키워드입니다. 특별한 상태를 정의하다 소속 HTML 요소의 CSS 선택자에 가상 클래스를 추가하려면 콜론 구문 : 이렇게 : a : 호버링 ...
CSS 클래스는 최상위 메뉴 아이템이나 사이드 바 위젯의 제목과 같은 스타일 규칙을 적용하려는 HTML 요소에 추가 할 수있는 속성입니다. 다시 말해 CSS 클래스를 사용하여 HTML 요소 그룹화 또는 분류 비슷한 방법으로.
가짜 분류는 그것들과 비슷하다. 동일한 특성을 공유하는 요소에 스타일 규칙을 추가하는 데 사용됩니다..
그러나 진정한 수업은 사용자 정의 과 소스 코드에서 발견 될 수있다., 예를 들면 그만큼 정규 CSS 클래스의 작업 ~이다. 요소 분류 또는 그룹화. 개발자는 요소를 그룹화하는 방법을 알고 있습니다. "메뉴 항목", "단추", "축소판 그림"등과 같은 클래스를 그룹화하고 유사한 요소를 나중에 스타일링 할 수 있습니다. 이러한 분류는 요소의 특성을 기반으로합니다. 개발자 자신이 제공. 예를 들어, 개발자가 그러나 HTML 요소는 그들 자신의 공통된 특징 위치, 성격 및 페이지와 사용자와의 상호 작용을 기반으로합니다. 이것들은 아니 일반적으로 HTML 코드에 표시, 그러나 우리는 할 수있다. 가상 클래스로 그들을 목표로 삼다. CSS에서 예를 들면 : 이들은 의사 클래스가 일반적으로 목표로 삼는 일종의 특성입니다. 클래스와 의사 클래스의 차이를 더 잘 이해하기 위해 클래스를 사용한다고 가정 해 봅시다. 다음 마지막 CSS 요소를 다음 CSS로 스타일을 지정할 수 있습니다. 그러나 마지막 요소가 변경되면 어떻게됩니까? 글쎄, 우리는 이 번거로운 클래스 업데이트는 사용자 에이전트에 맡길 수 있습니다., 적어도 요소들 사이에 공통적 인 특성들 (그리고 마지막 요소는 얻을 수있는 공통 요소 임). 데 미리 정의 된 수많은 종류의 의사 클래스가 있으며, 모두 액세스 할 수 없거나 액세스가 까다로운 기능을 기반으로 요소를 대상으로 지정할 수있는 방법을 제공합니다. 다음은 MDN의 표준 의사 클래스 목록입니다.. 동적 의사 클래스는 HTML 요소에 추가되거나 HTML 요소에서 제거됩니다. 역동적 인, 전환하는 국가에 따라 사용자의 상호 작용에 대한 응답으로. 동적 의사 클래스의 몇 가지 예는 다음과 같습니다. 상태 기반 의사 클래스는 요소가있을 때 요소에 추가됩니다. 특정 정적 상태에서. 가장 잘 알려진 예는 다음과 같습니다. 가장 인기있는 상태의 가상 클래스가 있어야합니다. 구조적 가상 클래스는 문서 구조에서 그들의 위치에. 가장 일반적인 예는 다음과 같습니다. 다음과 같이 분류하기 어려운 기타 클래스도 있습니다. 의사 클래스에 대해 가장 어려운 점 중 하나는 아마도 둘 다 구조적인 가상 클래스이며 마크입니다. 부모 엘리먼트 내의 특정 엘리먼트 (콘테이너), 그러나 다른 방법으로. 취하다 엔 2이면 예제를 보자.. 이 짧은 CSS가 두 가지 다른 경우에 HTML을 어떻게 작성하는지 보겠습니다.. 사례 1에서, 그러나 부모 요소 ~하다 두 번째 단락을 이 예에서 제 1 항, 어린이 1 제 2 항, 어린이 3 두 번째 경우에는 정렬되지 않은 목록을 세 번째 위치로 이동하고 두 번째 단락은 세 번째 자리로 이동합니다. 즉, 제 1 항, 어린이 1 제 2 항, 어린이 2 차이점에 대해 더 읽고 싶다면 우리가 의사 클래스에 관해 말할 때, 이해하는 것도 중요합니다. 의사 요소와 어떻게 다른지, 그들을 섞지 않기 위해서. 그러나 우리는 pseudo-class를 사용하여 문서 트리에 존재하다 별도로 표시하지 않은 의사 요소를 사용하면 정상적으로 존재하지 않는다. DOM에서, 전혀 (예. 또한 구문의 차이. 가짜 요소는 일반적으로 이중 콜론으로 식별됩니다. 이것은 CSS2와 같은 혼란을 야기 할 수 있습니다. 유사 요소는 단 하나의 콜론으로 표시되었습니다. 브라우저는 여전히 의사 요소에 대한 단일 콜론 구문을 허용합니다. 또한 의사 클래스와 의사 요소 간에는 차이가 있습니다. 우리가 CSS로 그들을 목표로 삼을 수있는 방법. 가짜 요소 만 나타날 수 있습니다. 후 셀렉터의 시퀀스 인 반면 의사 클래스는 CSS 셀렉터 시퀀스의 어느 곳에 나 배치 할 수 있습니다.. 예를 들어, 다음과 같은 목록 요소의 마지막 목록 항목을 타겟팅 할 수 있습니다. 또는 선택기의 첫 번째 시퀀스는 의사 요소와 비슷한 것을 시도해 보겠습니다.. 위의 CSS 코드가 유효하며 텍스트 "red"가 나타납니다. 후 그만큼 반면에이 코드는 작동하지 않습니다. 의사 요소의 위치를 바꿀 수 없다. 셀렉터 시퀀스 내부. 또한 선택자 옆에 하나의 의사 요소 만 나타날 수 있으며 반면에 의사 클래스 서로 결합 될 수있다. 조합이 의미가있는 경우. 예를 들어 읽기 전용 인 첫 번째 하위 요소를 대상으로하려면 의사 클래스 조합을 만들 수 있습니다 선택기 코드에 그 사실을 아는 것이 중요합니다. 이것들은 아니 CSS 가상 클래스 jQuery가 목표로 삼고있는 그것들은 jQuery 선택기 확장이라고 불립니다.. jQuery 선택기 확장을 사용하면 간단한 키워드로 HTML 요소를 타겟팅하십시오.. 대부분은 하나의 키워드로 표현되는 여러 일반 CSS 선택자의 조합입니다..가짜 클래스의 목적
.마지막 서로 다른 부모 컨테이너에있는 마지막 요소를 식별한다..
li.last 텍스트 변형 : 대문자; option.last font-style : italic;
.마지막 전 마지막 요소에서 현재 요소로의 클래스.:막내 가상 클래스 정말로 참으로 유용합니다. 이렇게하면 마지막 요소를 나타낼 필요가 없다. HTML 코드에서 사용할 수 있지만 다음 CSS로 스타일을 지정할 수 있습니다. li : last-child 텍스트 변환 : 대문자; 옵션 : last-child 글꼴 스타일 : 기울임 꼴;
의사 클래스의 주요 유형
1. 동적 가짜 클래스
: 마우스 오버, :초점, :링크, 과 : 방문한 사람 :, 이 모든 것은 앵커 태그. a : 방문한 color : # 8D20AE; . button : hover, .button : focus font-weight : bold;
2. 상태 기반 의사 클래스
: 확인 됨 확인란에 적용 할 수있는): 전체 화면 현재 전체 화면 모드로 표시되는 모든 요소를 대상으로 지정: 사용 중지됨 사용 중지 된 모드 일 수있는 HTML 요소 (예 : , , 과 . : 확인 됨, 확인란이 선택되었는지 여부를 플래그로 지정합니다.. .체크 박스 : checked + label font-style : italic; 입력 : 사용 중지됨 background-color : #EEEEEE;
3. 구조 가짜 클래스
: 첫 번째 자식, :막내, 과 : n 번째 자식 (n) - 모두 컨테이너의 특정 위치를 기반으로 컨테이너 내부의 특정 하위 요소를 타겟팅하는 데 사용할 수 있습니다. :뿌리 DOM에서 최상위 수준의 부모 요소를 대상으로하는. 4. 기타 의사 클래스
: not (x) selector x와 일치하지 않는 요소를 선택합니다.: lang (언어 코드) 콘텐츠가 특정 언어로되어있는 요소를 선택합니다.: dir (방향성) 주어진 방향성 (왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽)의 내용을 가진 요소를 선택한다.. p : lang (코) 배경색 : # FFFF00; : 루트 배경색 : # FAEBD7;
n 번째 자녀 대 n 번째 유형 가짜 클래스
: n 번째 자식 과 : nth-of-type 가상 클래스.: n 번째 자식 (n) 요소를 대상으로합니다. 부모 요소의 두 번째 자식, 과 : n 번째 유형 (n) 표적 두 번째는 같은 유형 요소의 (단락과 같은) 상위 요소 내부. / * 부모 요소 안의 두 번째 자식 인 단락 * / p : nth-child (2) color : # 1E90FF; // lightblue / * 부모 요소 안의 두 번째 단락 * / p : nth-of-type (2) font-weight : bold;
사례 1
제 n 자녀 (2) 규칙이 적용되지 않습니다. 두 번째 아이이지만 아니 단락. nth-of-type (2) 규칙은 적용됩니다.이 규칙은 요소들, 그리고 다른 것에 관심이 없다. 유형 상위 요소 내부의 요소 (예 : 순서가 지정되지 않은 목록).nth-of-type (2) 규칙은 Child 3 인 두 번째 단락의 스타일을 지정합니다..
순서가 지정되지 않은 목록 1, 하위 2
사례 2
: n 번째 자녀 (2) 그리고 : nth-of-type (2) 두 번째 단락은 부모의 두 번째 자녀이기 때문에 규칙이 적용됩니다.
순서가 지정되지 않은 목록 1, 자식 3
: nth-of-child 과 : nth-of-type pseudo-classes, CSS 트릭에는 위대한 포스트가 있습니다. SASS를 사용하는 경우 Family.scss를 사용하면 복잡한 n 번째 자녀'ified 요소들.가짜 클래스와 의사 요소 비교
가짜 요소, 와 같은 ::전에 과 ::후 (사용 방법에 대한 자습서 참조)도 있습니다. 사용자 에이전트에 의해 추가됨, 과 CSS로 표적화 및 스타일 지정이 가능합니다. 뿐만 아니라 의사 클래스와 마찬가지로. ::전에 과 ::후) 또는 기존 요소의 특정 부분 (예 : ::첫 편지 또는 :: 자리 표시 자). ::, 의사 클래스는 단일 콜론으로 식별됩니다. :.1. CSS 셀렉터 시퀀스에서의 그들의 위치
ul> : last-child.red color : # B0171F;
ul> .red : last-child color : # B0171F;
.빨간) 두 번째 요소는 해당 요소를 소유 한 요소 중 마지막 자식을 선택합니다. .빨간 내부의 클래스 ul> .red :: after display : block; 내용 : '빨간색'; color : # B0171F;
수업과 관련된 항목들 .빨간. ul> :: after.red display : block; 내용 : '빨간색'; color : # B0171F;
2. 셀렉터 시퀀스에서의 발생 횟수
: 첫 번째 자식 과 : 읽기 전용 다음과 같은 방법으로 : first-child : 읽기 전용 color : #EEEEEE;
jQuery 선택기 확장
: 구문이 항상 적절한 CSS 가상 클래스를 구성하지는 않습니다. jQuery를 사용한 적이 있다면, 다음과 같이 많은 선택기를 사용했을 것입니다. : 구문, 예를 들어 $ ( ': 체크 박스'), $ ( ': 입력') 과 $ ( ': 선택됨). / * 모든 입력 관련 HTML 요소의 글꼴을 button, select, input * / $ ( ": input") .css ( "font-family", "courier new")와 같이 변경합니다.
