ProgramingTip

클래스가있는 첫 번째 요소에 대한 CSS 선택기

bestdevel 2020. 9. 28. 09:38
반응형

클래스가있는 첫 번째 요소에 대한 CSS 선택기

이름을 가진 클래스 여러 요소가 red있지만 class="red"다음 CSS을 사용하여 규칙 첫-th 요소를 선택할 수없는을 구석으로 같습니다 .

.red:first-child {
    border: 5px solid red;
}
<p class="red"></p>
<div class="red"></div>

이 선택기에서 무엇이 잘못 수정합니까?

의견 덕분에 요소가 선택 되려면 부모의 첫 번째 슬픈 말입니다. 나는 다음과 같은 구조를 가지고있는 규칙은 주석에 된대로 참조합니다.

.home .red:first-child {
    border: 1px solid red;
}
<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

학급에서 첫 번째 아이를 어떻게 사용할 수 red있습니까?

이것은 작가가 어떻게 :first-child작동 하는지 오해하는 가장 잘 작동 하는지 중 하나입니다 . CSS2에 도입 의 :first-child의사 클래스를 대표하는 부모의 최초의 아이를 . 그게 다야. 나머지 복합 선택기에서 조건과 가장 먼저 일치하는 것 같은 요소를 선택 매우 일반적인 오해가 있습니다. 선택 작동 작동하는 방식 ( 설명 은 여기 참조 ) 때문에 이는 사실이 아닙니다.

선택기 레벨 3:first-of-type은 해당 요소 유형의 형제 중 첫 번째 요소를 의사 클래스를 도입합니다 . 이 답변 은 그림과 함께 :first-child및 의을 설명합니다 :first-of-type. 그러나 드와 :first-child다른 조건이나 속성을 보지 않습니다. HTML에서 요소 유형은 태그 이름으로 표시됩니다. 질문에서 그 유형은 p.

불행히도 :first-of-class주어진 클래스의 첫-th 자식 요소와 일치 여부하는 유사한 pseudo-클래스 는 없습니다 . Lea Verou 와 제가이 문제를 해결 하기 위해 (완전히 독립적이기는하지만) 먼저 원하는 스타일을 해당 클래스의 모든 요소에 적용하는 방법이 있습니다 .

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... 그런 다음 재정의 규칙에서 일반 형제 결합 자를 사용하여 첫 번째 클래스 에서 오는 클래스의 요소 스타일을 "실행 취소"합니다 .~

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

이제가있는 첫 번째 요소에만 class="red"차량이 있습니다.

다음은 규칙이 적용되는 방법에 대한 설명입니다.

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

  1. 규칙이 적용되지 않습니다. 모든 것이 문서화되었습니다.
    이 요소에는 클래스 red가 건너 뛰고 있습니다.

  2. 첫 번째 규칙 만 적용됩니다. 빨간색으로 변경됩니다.
    요소에는 클래스이 red가 있지만 red상위에 클래스가있는 요소가 앞에 나오지 않습니다 . 따라서 두 번째 규칙은 적용되지 않고 첫 번째 규칙이 적용됩니다.

  3. 두 규칙이 모두 적용됩니다. 모든 것이 문서화되었습니다.
    이 요소에는 클래스가 red있습니다. 또한 클래스와 함께 하나의 다른 요소가 앞에옵니다 red. 따라서 두 가지 규칙이 모두 적용되고 두 번째 border선언이 첫 번째 선언보다 우선적으로 "실행 취소"됩니다.

이 선택기 3 년에 도입 달리 단지 추가로, 일반 형제 연결자, 꽤 IE7에서 잘 지원 및 최신 버전 인 :first-of-type및 최신 버전 :nth-of-type()IE9에서 지원합니다. 좋은 브라우저 지원이 필요하다면 운이 좋을 것입니다.

형제 결합 자가이 기술에서 유일한 중요한 구성 요소 이고 놀라운 브라우저 지원을 제공 한다는 사실은 사실 은이 기술을 매우 다재다능하게 만듭니다. 클래스 선택기 외에도 다른 요소를 필터링하는 데 적용 할 수 있습니다.

  • 이를 사용 :first-of-type하여 IE7 및 IE8에서 클래스 선택기 대신 유형 선택기를 제공하여 문제를 사용할 수 있습니다 (이후 섹션에서 잘못된 방법에 대해 자세히 설명합니다).

    article > p {
    /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
}

article > p ~ p {
    /* Undo the above styles for every subsequent article > p */
}

  • 속성 선택기 또는 클래스 대신 다른 단순 선택기로 필터링 할 수 있습니다 .

  • 의사 요소가 기술적으로 단순한 선택 자가 아니더라도 재정의 기술을 의사 요소 와 결합 할 수도 있습니다 .

이 작업을 수행해야 할 첫 번째 규칙을 재정의 할 수있는 다른 형제 요소에 대한 기본 스타일을 미리 알아야합니다. 또한 여기에는 CSS의 규칙 재정의가 포함 선택자 API 또는 Selenium 의 CSS 로케이터 와 함께 사용하는 단일 선택기로 결과를 얻을 수 없습니다 .

선택기 4 는 :nth-child()표기법에 대한 확장 (원래는 완전히 새로운 가상 클래스 인 :nth-match()) :nth-child(1 of .red)을 도입하여 가상 .red:first-of-class. 최근의 제안이기 때문에 아직 사이트에서 사용할 수있는 상호 운용 가능한 구현이 충분하지 않습니다. 곧 변경되기를 바랍니다. 그 동안 내가 제안한 해결 방법은 대부분의 경우에 효과가있을 것입니다.

이 답변은 질문이 주어진 클래스를 가진 모든 첫 번째 요소를 가진 가정합니다. 전체 문서 에서 복잡한 선택기의 n 번째 일치에 대한 의사 클래스 나 일반 CSS 솔루션은 없습니다 . 솔루션의 존재 여부는 문서 구조에 크게 좌우됩니다. jQuery를를이 제공 :eq(), :first, :last이 목적을 위해 더, 다시 노트는 그러나 것을 그들은 매우 다르게에서 기능 현관 :nth-child()등 . 선택기 API를 사용 document.querySelector()하여 첫 번째 일치 항목을 가져올 데 사용할 수 있습니다 .

var first = document.querySelector('.home > .red');

또는 document.querySelectorAll()인덱서와 함께 사용 하여하여 특정 일치 항목을 선택하십시오.

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Philip Daubmeier.red:nth-of-type(1) 의 원래 수락 된 답변 의 솔루션이 작동 하지만 ( 원래 Martyn이 작성 했지만 이후 삭제됨) 예상대로 작동하지.

예를 들어 p원래 마크 업에서 를 선택하려는 경우 :

<p class="red"></p>
<div class="red"></div>

... 그러면 각 요소가 해당 유형 ( 및 각각) 중 첫 번째 (유일한) 하나 .red:first-of-type(와 동일 .red:nth-of-type(1)) 사용할 수 있는 둘 다 선택기에 일치합니다.pdiv

특정 클래스의 첫 번째 요소가 해당 유형 의 첫 번째 요소 인 경우 의사 클래스가 작동하지만 이는 우연히 발생합니다 . 이 동작은 Philip의 대답에 나와 있습니다. 이 요소 앞에 동일한 유형의 요소를 붙이는 순간 선택기가 실패합니다. 업데이트 된 마크 업 가져 오기 오기 :

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

사용하여 규칙을을 적용 .red:first-of-type하면 작동하지만 p클래스없이 다른 규칙 을 추가하면 다음 과 같이 됩니다 .

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

... 첫 번째 .red요소가 이제 두 번째 요소 이기 때문에 선택기가 즉시 실패 p합니다.

:first-child이름을 말한다처럼 선택은 부모 태그의 첫 번째 선택을 선택, 것입니다. 동일한 부모 태그에 있어야합니다. 정확한 예가 작동합니다 ( 여기에서 시도해 보았습니다 ).

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

다른 부모 태그에 태그를 중첩했을 가능성이 있습니까? 클래스의 태그가 red실제로 아래의 첫 번째 태그입니까?

또한이 전체 문서의 첫 번째 태그에만 적용되는 것이 아니라 다음과 같이 새 부모가 태그를 둘러 쌀 때마다 적용됩니다.

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

first그리고 third다음 빨간색이됩니다.

최신 정보 :

martyn이 왜 대답을 대답 할 수 있는지 확인 :nth-of-type합니다.

<html>
<head>
<style type="text/css">
.red:nth-of-type(1)
{
    border:5px solid red;
} 
</style>
</head>

<body>
    <div class="home">
        <span>blah</span>
        <p class="red">first</p>
        <p class="red">second</p>
        <p class="red">third</p>
        <p class="red">fourth</p>
    </div>
</body>
</html>

마틴, 대한에 크레딧 . 예를 들어 여기에 더 많은 정보가 있습니다 . 이것은 CSS 3 선택기 그것이 모든 브라우저가이를 인식하는 것을 의미합니다 (예 : IE8 이상).

정답은 다음과 가변합니다.

.red:first-child, :not(.red) + .red { border:5px solid red }

Part I : 요소가 부모의 첫 번째이고 클래스가 "red"이면 모든 것이 생깁니다.
파트 II : ".red"요소가 상위 요소의 첫 번째가 아니라 ".red"클래스가없는 요소 바로 다음 경우에 해당하는 명예를받을 자격이 있습니다.

바이올린 아니면 일어나지 가능성이 있습니다.

Philip Daubmeier의 대답은 받아 들여지만하지 않습니다. 첨부 된 바이올린을 참조하십시오.
BoltClock의 답변은 작동하지만 불필요하게 스타일 을 정의하고 덮어 씁니다
(특히 그렇지 않으면 다른 테두리를 상속하는 문제 - 기타 를 경계 : 없음으로 선언하고 싶지 않음).

편집 : "빨간색이 아닌 빨간색을 여러 번 따라가는 경우"첫 번째 "빨간색이 가져옵니다. BoltClock의 답변을 안됩니다. 바이올린 참조

당신은 first-of-type또는 사용할 수 있습니다nth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

자와 일치 시키려면 요소에의 클래스 이름이 red있어야하며 부모의 첫 번째해야 선택합니다.

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

다른 답변은 문제 를 다루기 때문에 나머지 절반, 해결 방법을 시도해 보겠습니다. 불행히도 여기에 CSS 전용 솔루션이 생각 모르겠습니다 . 취소 제가 생각할 수있는 것은 아닙니다 . 그래도 몇 가지 다른 옵션이 있습니다 ....

  1. first요소를 생성 할 때 다음과 같이 클래스를 요소에 할당합니다 .

    <p class="red first"></p>
<div class="red"></div>

    CSS :

    .first.red {
  border:5px solid red;
}

    이 CSS 는 first 및 red클래스가있는 요소 만 일치 시킵니다.

  2. 또는 JavaScript에서 동일한 작업을 수행합니다. 예를 들어 위와 동일한 CSS를 사용하여이를 수행하는 데 사용할 jQuery는 다음과 같습니다.

    $(".red:first").addClass("first");

위의 답변은 너무 복잡합니다. 

.class:first-of-type { }

첫 번째 클래스 유형을 선택합니다. MDN 소스

업데이트 된 문제에 따라

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

어때 

.home span + .red{
      border:1px solid red;
    }

이것은 class home , 그 다음 요소 span 및 마지막으로 span 요소 바로 뒤에 배치되는 모든 .red 요소 를 선택합니다.

참조 : http://www.w3schools.com/cssref/css_selectors.asp

내 프로젝트에서 이것을 얻었습니다.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}
<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

nth-of-type (1)을 사용할 수 있지만 사이트가 IE7 등을 지원할 필요가 없는지 확인하십시오.이 경우 jQuery를 사용하여 본문 클래스를 추가 한 다음 IE7 본문 클래스를 통해 요소를 찾은 다음 요소 이름을 추가하십시오. nth-child 스타일링에서.

코드를 다음과 같이 변경하여 작동시킬 수 있습니다.

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

이것은 당신을 위해 일합니다

.home span + .red{
      border:3px solid green;
    }

여기에 SnoopCode 의 CSS 참조 가 있습니다.

목록 ul li에 대한 배경 이미지를 갖기 위해 아래 CSS를 사용하고 있습니다.

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}
<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

이 시도 :

    .class_name > *:first-child {
        border: 1px solid red;
    }

어떤 이유로 위의 답변 중 어느 것도 부모의 첫 번째 이자 유일한 첫 번째 자녀 의 경우를 다루지 않는 것 같습니다.

#element_id > .class_name:first-child

이 코드 내에서 첫 번째 클래스 자식에만 스타일을 적용하려면 위의 모든 답변이 실패합니다.

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

이 간단하고 효과적인 시도

 .home > span + .red{
      border:1px solid red;
    }

이 솔루션을 시도하십시오.

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

CodePen 링크

+바로 뒤에 배치 된 요소를 선택하기 위해 상대 선택기 를 사용 하는 것이 여기에서 가장 잘 작동 한다고 생각합니다 (이전에 제안 된 몇 가지 사항).

이 경우에이 선택기를 사용할 수도 있습니다.

.home p:first-of-type

그러나 이것은 클래스 1이 아닌 요소 선택자입니다.

여기 CSS 선택기 목록이 있습니다 : https://kolosek.com/css-selectors/

참고 URL : https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class

반응형

'ProgramingTip' 카테고리의 다른 글

'수익률'의 적절한 사용  (0) 2020.09.28
git 커밋을 삭제하지만 변경 사항을 사용할 수 있습니까?  (0) 2020.09.28
출력을 파일 및 stdout으로 리디렉션하는 방법  (0) 2020.09.28
JavaScript에서 정의되지 않은 변수를 확인하는 방법  (0) 2020.09.28
한 div를 다른 div 위에 기계하는 방법  (0) 2020.09.28

'ProgramingTip'의 다른글

  • 현재글클래스가있는 첫 번째 요소에 대한 CSS 선택기

관련글

댓글

티스토리툴바