programing

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

javamemo 2023. 6. 4. 10:14
반응형

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

클래스 이름을 가진 요소가 많이 있습니다.red하지만 첫 번째 요소를 선택할 수 없습니다.class="red"다음 CSS 규칙 사용:

.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-child그리고.:first-of-type 그나러와 로, 지가로마찬.:first-child다른 조건이나 속성은 고려하지 않습니다.HTML에서 요소 유형은 태그 이름으로 표시됩니다.그 은 질에서, 그유은입니다.p.

유감스럽게도, 유사한 것은 없습니다.:first-of-class지정된 클래스의 첫 번째 자식 요소와 일치하는 유사 클래스입니다.이 답변이 처음 게시되었을 때, Selectors 레벨 4의 새로 게시된 FPWD는 첫 번째 단락에서 언급한 것처럼 기존의 선택기 역학을 중심으로 설계된 유사 클래스를 도입했습니다. 선택기 목록 인수를 추가하여 원하는 필터링 동작을 얻을 수 있습니다.최근 몇 년 동안 이 기능은 선택적인 두 번째 인수로 나타나 사물을 단순화할 뿐만 아니라 잘못된 인상을 피하기 위해 그 자체로 포함되었습니다.:nth-match()전체 문서에서 일치합니다(아래의 마지막 참고 참조).

크로스 브라우저 지원(진지하게는 거의 10년이 지났고 지난 5년 동안 단 하나의 구현만 수행)을 기다리는 동안 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"국경이 있을 것입니다.

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

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

.home > .red ~ .red {
    border: none;
}
<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가 " 스와함하이다상선요른다니행됩소가의나께클래다▁with▁class니▁the선됩▁other▁it"인 적어도 하나의 요소가 됩니다.red 두 되고, 두 규칙은 다음과 같습니다.border선언은 첫 번째 선언을 무시하고, 따라서 "허용"하는 것입니다.

3에 되었지만, 은 실제로 잘 .:first-of-type그리고.:nth-of-type()IE9 이상에서만 지원됩니다.좋은 브라우저 지원이 필요하면 운이 좋습니다.

형제 조합이 이 기술에서 유일하게 중요한 구성 요소이고 놀라운 브라우저 지원을 제공하기 때문에 클래스 선택기 외에도 다른 요소를 필터링할 수 있습니다.

  • 이것을 사용하여 작업할 수 있습니다.:first-of-typeIE7 및 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의 규칙을 재정의하는 작업이 포함되므로 Selectors API 또는 Selenium의 CSS Locator에서 사용할 단일 셀렉터로는 동일한 작업을 수행할 수 없습니다.

마지막으로, 이 대답은 주어진 클래스를 가진 임의의 수의 첫 번째 자식 요소를 찾는 것으로 가정한다는 것을 기억하십시오.전체 문서에 걸쳐 복합 선택기의 n번째 일치에 대한 유사 클래스나 일반 CSS 솔루션도 없습니다. 솔루션이 존재하는지 여부는 문서 구조에 크게 의존합니다.jQuery 제공:eq(),:first,:last이러한 목적을 위해 더 많은 기능을 제공하지만, 다시 한 번 주목해 보십시오.Selectors 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

록비록▁the비..red:nth-of-type(1)필립 다우브마이어가 원래 수락한 답변의 해결책(원래 마틴이 썼지만 이후 삭제됨)은 당신이 기대하는 방식으로 작동하지 않습니다.

예를 들어, 다음 항목만 선택하려는 경우p예외:

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

그러면 사용할 수 없습니다..red:first-of-type함)..red:nth-of-type(1)), 각그()중한) 이기 때문입니다.p그리고.div각각)를 선택하면 둘 다 선택기에서 일치합니다.

특정 클래스의 첫 번째 요소도 해당 유형의 첫 번째 요소일 때 유사 클래스는 작동하지만, 이것은 우연에 의해서만 발생합니다.이러한 행동은 필립의 대답에서 입증됩니다.이 요소 앞에 같은 유형의 요소를 삽입하는 순간 선택기가 실패합니다.질문에서 마크업하기:

<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-childSelector는 이름처럼 부모 태그의 첫 번째 자식을 선택하기 위한 것입니다.이 예제는 다음과 같이 작동합니다(방금 여기서 시도).

<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그러면 빨간색이 될 것입니다.

당신의 경우, 당신은 사용할 수 있습니다.:nth-of-type선택기:

.red:nth-of-type(1)
{
    border:5px 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>

이 접근 방식이 포함된 답변을 삭제한 마틴의 공로입니다.

에 대한 자세한 내용은 다음과 .:nth-child()그리고.:nth-of-type()는 http://www.quirksmode.org/css/nthchild.html 에서 확인할 수 있습니다.

이 버전은 CSS3 선택기이므로 일부 오래된 브라우저 버전(예: IE8 또는 이전 버전)이 예상대로 작동하지 않을 수 있습니다.자세한 내용은 https://caniuse.com/ ?search=nth-of-type을 참조하십시오.

정답은 다음과 같습니다.

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

파트 I: 요소가 부모에 대해 처음이고 클래스 "빨간색"을 가질 경우, 경계가 됩니다.
파트 II: ".red" 요소가 상위 요소에 먼저 있는 것이 아니라 클래스 ".red"가 없는 요소를 바로 따르는 경우에도 해당 경계의 명예를 누릴 자격이 있습니다.

Fiddle 아니면 그것은 일어나지 않았습니다.

필립 다움마이어의 대답은 받아들여졌지만 정확하지 않습니다 - 첨부된 바이올린을 참조하십시오.
하고 덮어씁니다.
(특히 다른 경계를 상속하는 문제 - 다른 경계를 경계로 선언하고 싶지 않은 문제: 예)

편집: 빨간색이 아닌 다음에 "빨간색"이 여러 번 있는 경우, 각 "첫 번째" 빨간색이 테두리를 받습니다.이를 방지하려면 BoltClock의 답변을 사용해야 합니다.피들 참조

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

.class:first-of-type { }

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

참고: 2021년 6월에 Chrome 91 및 Firefox 89로 테스트되었습니다.

아무도 가장 깨끗한 해결책을 언급하지 않은 것이 놀랍습니다.

.red:not(.red ~ .red) {
    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>

당신은 사용할 수 있습니다.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"></span> <!-- MATCH -->
</div>

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

<div>
    <span>Blah</span>
    <div><p class="red"></p></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");

제 프로젝트에서 이걸 얻었어요.

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>

나는 리스트리의 배경 이미지를 갖기 위해 아래의 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>

당신의 업데이트된 문제에 따라

<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;
    }

그러면 클래스 홈이 선택되고 요소 스팬이 선택되며 스팬 요소 바로 뒤에 배치되는 모든 .red 요소가 선택됩니다.

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

어떤 이유에서인지 위의 답변 중 어떤 것도 부모의 진짜 첫째이자 유일한 첫째 아이의 경우를 다루지 않는 것처럼 보였습니다.

#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>

다음 코드는 분명히 어디서나 잘 작동할 것입니다.
그것은 간단하고 짧습니다.

<div class="home">
    <span>blah</span>
    <p class="blue"> first-blue  </p>
    <p class="blue"> second-blue </p>
    <p class="blue"> third-blue  </p>

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

    <p class="pink"> first-pink  </p>
    <p class="pink"> second-pink </p>

    <p class="red">  new-first-red   </p>
    <p class="red">  new-second-red  </p>
</div>

우리는 선택할 수 있습니다.first-red매개 변수:

.home .red:not(.home .red ~ .red) {
    background-color: blue;
}

경우new-first-red당신이 사용해야 할 것입니다.+에 ~.

n번째 유형(1)을 사용할 수 있지만 해당 사이트에서 IE7 등을 지원할 필요가 없는지 확인하십시오. 이 경우 jQuery를 사용하여 본문 클래스를 추가한 다음 IE7 본문 클래스를 통해 요소를 찾은 다음 요소 이름을 추가합니다.

코드를 이와 같은 것으로 변경하여 작동할 수 있습니다.

<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;
    }

여기 그것에 대한 스눕코드의 CSS 참조가 있습니다.

이 모든 페이지와 다른 페이지 및 많은 설명서를 읽은 후 전체적으로.요약은 다음과 같습니다.

  • 첫째/마지막 자녀의 경우: 지금 안전하게 사용할 수 있습니다(모든 최신 브라우저에서 지원).
  • :nth-child() 지금 사용해도 안전합니다(모든 최신 브라우저에서 지원).하지만 그것은 심지어 형제자매도 포함해서 조심하세요!따라서 다음은 제대로 작동하지 않습니다.

/* This should select the first 2 element with class display_class
* but it will NOT WORK Because the nth-child count even siblings 
* including the first div skip_class
*/
.display_class:nth-child(-n+2){ 
    background-color:green; 
}
<ul>
   <li class="skip_class">test 1</li>
   <li class="display_class">test 2 should be in green</li>
   <li class="display_class">test 3 should be in green</li>
   <li class="display_class">test 4</li>
 </ul>

현재 클래스별 선택을 지원하지만 최신 브라우저에서는 지원하지 않는 선택기 :nth-child(.foo의 -n+2)가 있어 유용하지 않습니다.

그러면 Javascript 솔루션을 사용할 수 있습니다(위의 예를 수정하겠습니다).

// Here we'll go through the elements with the targeted class
// and add our classmodifer to only the first 2 elements!


[...document.querySelectorAll('.display_class')].forEach((element,index) => {
  if (index < 2) element.classList.add('display_class--green');
});
.display_class--green {
    background-color:green;
}
<ul>
   <li class="skip_class">test 1</li>
   <li class="display_class">test 2 should be in green</li>
   <li class="display_class">test 3 should be in green</li>
   <li class="display_class">test 4</li>
 </ul>

동일한 클래스 이름을 가진 요소 그룹 내의 첫 번째 및 마지막 요소를 표시하기 위한 빠른 'n 더티 jQuery 솔루션:

$('.my-selector').each(function(index, item) {
  if (!$(item).next().hasClass('my-selector')) {
    $(item).addClass('last');
  }
  if (!$(item).prev().hasClass('my-selector')) {
    $(item).addClass('first');
  }
});
.my-selector {
  padding: 5px;
  background: #ccc;
}

.my-selector.first {
  background: #fcc;
}

.my-selector.last {
  background: #cfc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <span>first element...</span>
  <div class="my-selector">Row 1</div>
  <div class="my-selector">Row 2</div>
  <div class="my-selector">Row 3</div>
  <div class="my-selector">Row 4</div>
  <span>other elements...</span>
  <div class="my-selector">Row 3</div>
  <div class="my-selector">Row 4</div>
</div>

간편하고 효과적으로 사용해 보십시오.

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

그냥 쓰기

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

그건 작동할 것이다.

selector를 하는 것을 .+바로 뒤에 배치된 요소를 선택하는 경우 여기서 가장 잘 작동합니다(앞에서 제안한 것처럼).

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

.home p:first-of-type

하지만 이것은 클래스 1이 아닌 요소 선택기입니다.

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

다음과 같은 방법을 시도해 볼 수 있습니까?

.red:first-of-type {
    border: 5px solid red;
}

마지막 요소에도 사용할 수 있습니다(필요한 경우).

.red:last-of-type {
    border: 5px 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>

코드펜 링크

이미 많은 분들이 설명을 해주신 것 같습니다.코드가 첫 번째 인스턴스의 첫 번째 자식만 선택하고 있습니다.빨간색 클래스의 첫 번째 아이를 모두 선택하려면 다음을 사용해야 합니다.

.home > .red:first-child {
    /* put your styling here */
}

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

반응형

'programing' 카테고리의 다른 글

Google Colab의 연결 해제를 방지하려면 어떻게 해야 합니까?  (0) 2023.06.04
사이톤의 setup.py 에서 파이썬 3 소스를 지정하는 방법은 무엇입니까?  (0) 2023.06.04
루비 / 레일즈: 시간으로 변환하거나 정수에서 시간을 얻습니까?  (0) 2023.06.04
루비는 모든 단어의 첫 글자를 대문자로 표시합니다.  (0) 2023.06.04
Gem 파일이 설치된 위치를 찾는 방법  (0) 2023.06.04

'programing'의 다른글

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

관련글

댓글

티스토리툴바