ตัวเลือก CSS สำหรับองค์ประกอบแรกที่มีคลาส

ฉันมีองค์ประกอบหลายอย่างที่มีชื่อคลาสredแต่ฉันไม่สามารถเลือกองค์ประกอบแรกด้วยการclass="red"ใช้กฎ CSS ต่อไปนี้:

.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หลอกชั้นหมายถึงเด็กแรกของแม่ แค่นั้นแหละ. มีความเข้าใจผิดที่พบบ่อยมากว่าจะเลือกองค์ประกอบลูกใดก็ตามที่เป็นคนแรกที่ตรงกับเงื่อนไขที่ระบุโดยส่วนที่เหลือของตัวเลือกสารประกอบ เนื่องจากวิธีการทำงานของตัวเลือก (ดูคำอธิบายที่นี่ ) นั่นไม่จริง

Selectors ระดับ 3 แนะนำ:first-of-typepseudo-classซึ่งแสดงถึงองค์ประกอบแรกในหมู่พี่น้องของประเภทองค์ประกอบ คำตอบนี้อธิบายด้วยภาพประกอบ, ความแตกต่างระหว่างและ:first-child :first-of-typeอย่างไรก็ตามเช่นเดียวกับ:first-childมันจะไม่ดูเงื่อนไขหรือคุณลักษณะอื่นใด ใน HTML ประเภทองค์ประกอบจะถูกแทนด้วยชื่อแท็ก pในคำถามประเภทที่เป็น

น่าเสียดายที่ไม่มี:first-of-classคลาสเทียมที่คล้ายกันสำหรับการจับคู่องค์ประกอบลูกแรกของคลาสที่กำหนด วิธีแก้ปัญหาหนึ่งที่Lea Verouและฉันคิดขึ้นมาสำหรับสิ่งนี้ (แม้ว่าจะเป็นอิสระโดยสิ้นเชิง) คือการใช้สไตล์ที่คุณต้องการกับองค์ประกอบทั้งหมดของคุณด้วยคลาสนั้น:

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

... จากนั้น "เลิกทำ" สไตล์สำหรับองค์ประกอบที่มีคลาสที่ตามหลังมาเป็นอันดับแรกโดยใช้combinator พี่น้องทั่วไป~ในกฎที่สำคัญ:

/* 
 * 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ประกาศครั้งที่สองจะแทนที่กฎแรกดังนั้นจึง "เลิกทำ" ดังนั้นจึงจะต้องพูด

เป็นโบนัส, แม้ว่ามันจะถูกนำมาใช้ใน Selectors 3, Combinator พี่น้องทั่วไปเป็นจริงสวยดีได้รับการสนับสนุนโดย IE7 และใหม่กว่าไม่เหมือน:first-of-typeและ:nth-of-type()ซึ่งได้รับการสนับสนุนโดยเฉพาะ IE9 เป็นต้นไป หากคุณต้องการการสนับสนุนเบราว์เซอร์ที่ดีแสดงว่าคุณโชคดี

ในความเป็นจริงความจริงที่ว่าพี่น้อง combinator เป็นองค์ประกอบสำคัญเพียงอย่างเดียวในเทคนิคนี้และมีการสนับสนุนเบราว์เซอร์ที่น่าทึ่งทำให้เทคนิคนี้มีความหลากหลายมาก - คุณสามารถปรับใช้สำหรับการกรององค์ประกอบโดยสิ่งอื่นนอกเหนือจากตัวเลือกชั้นเรียน:

• คุณสามารถใช้วิธีนี้เพื่อแก้ไขปัญหา: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 */
  }

• คุณสามารถกรองตามselectors attributeหรือ selector ง่าย ๆ อื่น ๆ แทน class

• คุณยังสามารถรวมเทคนิคการเอาชนะนี้เข้ากับองค์ประกอบแบบหลอกแม้ว่าองค์ประกอบแบบหลอกจะไม่ใช่ตัวเลือกง่ายๆ

โปรดทราบว่าเพื่อให้สิ่งนี้ใช้งานได้คุณจะต้องรู้ล่วงหน้าว่าสไตล์เริ่มต้นจะเป็นอย่างไรสำหรับองค์ประกอบพี่น้องอื่น ๆ ของคุณเพื่อให้คุณสามารถแทนที่กฎข้อแรก นอกจากนี้เนื่องจากสิ่งนี้เกี่ยวข้องกับกฎการเอาชนะใน CSS คุณจึงไม่สามารถทำสิ่งเดียวกันกับตัวเลือกเดียวสำหรับใช้กับSelectors APIหรือตัวระบุตำแหน่งของซีลีเนียม

มันมูลค่าการกล่าวขวัญว่า Selectors 4 เปิดตัวส่วนขยายไปยัง:nth-child()สัญกรณ์ ( แต่เดิมใหม่ทั้งหมดหลอกชั้นเรียกว่า:nth-match()) ซึ่งจะช่วยให้คุณสามารถใช้สิ่งที่ต้องการแทนการสมมุติ:nth-child(1 of .red) .red:first-of-classเป็นข้อเสนอที่ค่อนข้างเร็ว ๆ นี้มีการใช้งานร่วมกันไม่เพียงพอที่จะใช้งานได้ในไซต์การผลิต หวังว่าจะมีการเปลี่ยนแปลงในไม่ช้า ในระหว่างนี้การแก้ไขปัญหาที่ฉันแนะนำควรได้ผลในกรณีส่วนใหญ่

โปรดทราบว่าคำตอบนี้สันนิษฐานว่าคำถามนั้นกำลังมองหาองค์ประกอบย่อยของเด็กทุกคนที่มีชั้นเรียนที่กำหนด ไม่มีคลาสเทียมหรือแม้แต่ CSS ทั่วไปสำหรับการจับคู่ที่ซับซ้อนของตัวเลือกที่ซับซ้อนในเอกสารทั้งหมด - การแก้ปัญหานั้นขึ้นอยู่กับโครงสร้างของเอกสารเป็นอย่างมาก jQuery ให้:eq(), :first, :lastและอื่น ๆ เพื่อการนี้ แต่ทราบอีกครั้งว่าพวกเขาทำงานแตกต่างกันมากจาก:nth-child()et al, การใช้ 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

แม้ว่า.red:nth-of-type(1)วิธีการแก้ปัญหาในคำตอบดั้งเดิมที่ได้รับการยอมรับโดยPhilip Daubmeierทำงานได้ (ซึ่งเดิมเขียนโดยMartynแต่ถูกลบตั้งแต่นั้น) แต่ก็ไม่ได้ทำงานตามที่คุณคาดหวัง

ตัวอย่างเช่นหากคุณต้องการเลือกเฉพาะ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-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จากนั้นจะเป็นสีแดง

ปรับปรุง:

ฉันไม่รู้ว่าทำไมมาร์ตินลบคำตอบของเขา แต่เขามีทางออก: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>

เครดิตด๊อกเตอร์ ข่าวสารอื่น ๆ เช่นที่นี่ โปรดทราบว่านี่เป็นตัวเลือก CSS 3 ดังนั้นเบราว์เซอร์บางตัวเท่านั้นที่จะจดจำ (เช่น IE8 หรือเก่ากว่า)

คำตอบที่ถูกต้องคือ:

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

ส่วนที่ฉัน: หากองค์ประกอบเป็นครั้งแรกที่ผู้ปกครองและมีระดับ "สีแดง" มันจะได้รับชายแดน
ส่วนที่สอง: หากองค์ประกอบ ".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>

คำตอบข้างต้นซับซ้อนเกินไป

.class:first-of-type { }

นี่จะเป็นการเลือกประเภทแรกของคลาส แหล่ง MDN

เพื่อให้ตรงกับตัวเลือกของคุณองค์ประกอบจะต้องมีชื่อคลาส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 เช่นนี่คือ jQuery ที่คุณจะใช้ทำโดยใช้ CSS เดียวกันข้างต้น:

   $(".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>

ตามปัญหาการปรับปรุงของคุณ

<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

คุณสามารถใช้ nth-of-type (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 จากSnoopCodeเกี่ยวกับเรื่องนั้น

ฉันใช้ 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

แต่นี่คือตัวเลือกองค์ประกอบไม่ใช่คลาสหนึ่ง

ที่นี่คุณมีรายการตัวเลือก CSS ที่ดี: https://kolosek.com/css-selectors/

ลองวิธีนี้:

 .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