CSS Pseudo-classes(페르시브 클래스 )

CSS 페르시브 클래스 선택자는 다른 조건에 따라 구성 요소를 매칭하며, 반드시 문서 트리에서 정의된 것은 아닙니다. CSS 페르시브 클래스는 선택자에 추가된 키워드로, 선택할 요소의 특수 상태를 지정합니다. 예를 들어, :hover는 사용자가 버튼에 마우스를 올렸을 때 버튼의 색상을 변경할 수 있습니다.

페르시브 클래스는 무엇인가요

CSS 페르시브 클래스는 요소의 동적 상태 스타일을 설정할 수 있으며, 예를 들어, 마우스 오버, 활성 상태 및 포커스 상태, 그리고 문서 트리에 존재하지만 다른 선택자로 대상으로 사용할 수 없는 요소를 추가할 필요 없이 선택자의 ID나 클래스를 추가하지 않고도 선택할 수 있습니다. 예를 들어, 첫 번째나 마지막 자식 요소에 대한 것.

패seudo 클래스는 밑줄(:)로 시작합니다. 다음과 같은 방식으로 문법을 제공할 수 있습니다:

이 부분에서는 가장 일반적인 패seudo 클래스를 설명합니다.

고정 패seudo 클래스

사용고정패seudo 클래스 링크는 다른 방식으로 표시될 수 있습니다:

이 패seudo 클래스는 방문하지 않은 링크를 스타일링하고 방문한 링크를 스타일링할 수 있도록 합니다. 가장 일반적인 스타일링 기술은 방문한 링크에서 밑줄을 제거하는 것입니다.

a:link {
　　　　color: none;
}
a:visited {
　　　　text-decoration: none;
}

일부 앵커 패seudo 클래스는 동적입니다-이들은 사용자가 문서와 상호작용할 때(예: 마우스 오버나 포커스 등) 적용됩니다.

color: none;
　　　　color: none;
}
color: none;
　　　　color: none;
}
a:focus {
　　　　color: none;
}

이 패seudo 클래스는 사용자操作에 따라 링크의 표시 방식을 변경합니다.

• :hover는 사용자가 요소에 마우스 포인터를 올려놓고 선택하지 않을 때 적용됩니다.

• :active는 요소가 활성화되거나 클릭될 때 적용됩니다.

• :focus는 요소가 키보드 포커스를 가지면 적용됩니다.

:first-child pseudo class

:first-child 패seudo 클래스는 다른 요소의 첫 번째 자식 요소의 요소와 일치합니다. ol li:first-child 예제에서 선택자는 순서 목록의 첫 번째 목록 항목을 선택하고 그 중에서 상단 경계선을 제거합니다.

ol li:first-child {
　　　　border-top: none;
}

：last-seudo 패seudo 클래스

:last-child 패seudo 클래스는 다른 요소의 마지막 자식 요소의 요소와 일치합니다. 다음 ul li:last-child 예제에서 선택자는 불연속 목록에서 마지막 목록 항목을 선택하고 그 중에서 오른쪽 경계선을 제거합니다.

ul li:last-child {
　　　　border-right: none;
}

：nth-child pseudo class

CSS3introduced a new :nth-child pseudo class allows you to target one or more specific child objects of a given parent element. The basic syntax of this selection can be combined with the :nth-child(N), where N is a parameter that can be a number, a keyword (even or odd), or the form of expression xn+y, where x and y are integers (for example1n，2n，2n+1，...）。

table tr:nth-child(2n) td {
　　　　background: #eee;
}

上面的示例에서의 스타일 규칙은 테이블 행을 대신 강조했습니다. 그러나 요소에 어떤 ID나 클래스도 추가하지 않았습니다.

：lang pseudo class

Language pseudo class :lang allows to construct selectors based on the language setting of specific tags. The pseudo class :lang in the following exampleLanguage value assigned to the element is defined by the quote no. for clarity.

q:lang(no) {
　　　　quotes: "~" "~";
}
/*　HTML 코드 스니펫　*/Some text A quote in a paragraph Some text.

파seudo 클래스와 CSS 클래스

파seudo 클래스는 CSS 클래스와 함께 사용할 수 있습니다.

아래 예제에서 class="red"를 가진 링크는 빨간색으로 표시됩니다.

a.red:link {　　　　/*　style 규칙　*/
　　　　color: #ff0000;
}
<a class="red" href="#">Click me</a>　　　　/*　HTML 코드 스니펫　*/