CSS 유사 클래스: 요소 상태

반응형

지금까지 우리는 이미 링크를 살펴보고 의사 클래스를 형성했습니다. 이 기사에서는 원소 상태에 대해 살펴보겠습니다.

요소 상태는 요소가 가질 수 있는 특정 조건을 반영합니다. 예를 들어, 첫 번째 유형 또는 마지막 하위 유형일 수 있습니다.

저는 이것을 4개의 시리즈로 나누었습니다. 여기서 이것은 의사 상태에 대한 세번째 부분입니다.

다른 부분:

 

• 유사 상태 연결
• 의사 상태를 형성합니다.
• 요소 상태 선택기(이 )
• 기타 유사 상태(곧 출시 예정)

요소 상태 선택기

요소 상태 선택기는 제가 기사에서 많이 사용했던 유사 클래스입니다.
특정 일치 요소를 선택하고 특정 스타일을 적용할 수 있는 좋은 방법입니다.

다음과 같은 옵션이 있습니다.

• :첫째 자식
• :마지막 자식
• :자식만 있음
• :제1종류
• : 꼴찌 유형
• :n번째 자식
• :n번째 유형
• :유형만 있음
• :비어 있음

 

:첫째 자식, 마지막 자식,

이것은 첫 번째 또는 마지막 요소에 특정 스타일을 적용하려는 경우에 유용합니다.

예를 들어 리스트의 여백 간격띄우기에 자주 사용됩니다.

간단한 것을 시도해서 첫 번째 요소와 마지막 요소의 색상을 변경해 봅시다.

li:first-child {
    color: hotPink;
}
li:last-child {
    color: teal;
}

 

그리고 외동아이는 다음의 셀렉터를 사용할 수 있습니다.

li:only-child {
    color: crimson;
}

순서대로 발화하므로 사용할 때 주의하십시오.
세 가지 모두 있는 경우 기술적으로 only-= 하위 항목이 첫 번째에도 유효합니다.

이 CodePen에서 어떤 일이 일어나는지 볼 수 있습니다.

:제1종류

 

이것들은 위에 매우 가깝지만, 한 가지 차이점이 있습니다.

예를 들어 첫째 자식은 선택기의 첫 번째 요소가 되어야 합니다.
유형의 첫 번째 항목으로 해당 요소의 첫 번째 항목을 스타일링합니다.

이것을 보여주는 가장 쉬운 방법은 첫 번째 강한 요소가 나머지 요소보다 두껍기를 원하는 HTML 구조를 갖는 것입니다.

<div>
    <p>Line one</p>
  <strong>Important line</strong>
  <p>Line two</p>
  <strong>Slightly less important line</strong>
  <p>Line three</p>
</div>

div > strong:first-child {
    color: hotPink;
}
div > strong:first-of-type {
    color: purple;
    font-size: 1.5rem;
}

 

첫 번째 강한 것은 분홍색이 아닌 보라색을 볼 수 있을 거예요. 불이 붙지 않으니까요!

그리고 마지막 유형에서도 동일한 작업을 수행할 수 있습니다.

div > strong:last-child {
    color: gold;
}
div > strong:last-of-type {
    color: crimson;
}

아래의 CodePen에서 어떤 일이 일어나는지 볼 수 있습니다.

n번째 아이

 

이 두 개는 정말 환상적이고, 저는 이걸 자주 사용해요.
만약 CSS n번째 자식 선택자에 대한 전체 문서를 전용한다면.

x번째 아이템 선택 시 사용할 수 있습니다.

예를 들어, 두 번째 항목의 스타일을 지정할 수 있습니다.

li:nth-child(2) {
    background: gold;
}

이 셀렉터의 멋진 점은 정적 값이 하나만 있는 것이 아니라는 것입니다. 다음과 같은 값을 사용할 수 있습니다.

 

• 홀수/짝수: 홀수 또는 짝수 선택
• 2n+2: 두 번째 항목을 모두 선택하십시오.

한번 써보죠.

li:nth-child(2) {
    color: hotPink;
}
li:nth-child(odd) {
    color: hotPink;
}
li:nth-child(2n + 2) {
    color: hotPink;
}

그리고 우리는 n번째 타입 선택기를 사용하여 실제 첫 번째 아이템 대신 타입을 타겟으로 삼을 수 있습니다.
예를 들어, 발생한 이미지를 기준으로 왼쪽/오른쪽으로 하려는 경우 이미지에 매우 유용할 수 있습니다.

유형만 있는

 

이것은 꽤 웃긴 것이다. 셀렉터가 한 종류일 경우 불이 납니다.

외동 자식이 하나의 자식만 가질 수 있는 경우, 이 자식 요소는 이 자식 중 하나만 가질 수 있는지 여부를 말할 수 있습니다.

strong:only-of-type {
    color: hotPink;
}

그 결과 다음과 같은 결과가 초래됩니다.

:비어 있음

 

마지막은 빈 셀렉터입니다. 빈 요소를 나타내는 데 사용할 수 있습니다.

어떤 사람들은 심지어 이것을 잘못된 요소들을 찾는 방법으로 사용하기도 합니다.

빈 p 태그를 추가하는 WYSIWYG 편집기를 사용할 때도 사용할 수 있습니다.

:empty {
    display: none;
}

읽어주셔서 감사드리며 연결해보겠습니다!

 

제 블로그를 읽어주셔서 감사합니다. 자유롭게 내 이메일 뉴스레터를 구독하고 Facebook 또는 Twitter에 접속하십시오.