Css pseudo-classes - องค์ประกอบสุดท้าย-last

Css pseudo-classes - องค์ประกอบสุดท้าย-last

PSD เป็น HTML

เรียนรู้เพิ่มเติม

    <p>ในคาร์โคซ่า</p>

    <hr>

</div>

มีหลายวิธีในการเยื้องย่อหน้าสุดท้ายในแท็ก div: คุณสามารถเขียนรูปแบบอินไลน์ซ้ำ ๆ (ผื่นมาก สไตล์ดังกล่าวยากที่จะรักษาและเปลี่ยนแปลง ใช้เวลานาน); คุณสามารถใช้คลาสซ้ำได้ (ดีกว่าแต่ยังใช้เวลานานเกินไปในการสร้าง แก้ไข และนำไปใช้) กับลูกคนที่ n หรือตัวเลือกที่ดีที่สุดคือลูกคนสุดท้าย

เรียนรู้เพิ่มเติม

ปัญหาคือลิงค์สุดท้ายจะมีเฟรมอยู่ทางด้านขวาด้วย เฟรมดังกล่าวหมายความว่าควรมีลิงก์อื่นอยู่เบื้องหลัง ในกรณีของลิงค์สุดท้าย ไม่ควรเป็นเช่นนี้ คุณสามารถใช้ลูกคนสุดท้ายเพื่อลบเส้นขอบพิเศษ:

ตามการออกแบบ เฟรมจะถูกเพิ่มไปยังลิงก์ทั้งหมดทางด้านขวา โดยแยกรายการเมนูออกจากกัน:

นำทาง { border-right: 1px solid # 000; }

โอกาสสุดท้ายที่จะได้เห็น

หลักสูตรเชิงปฏิบัติเกี่ยวกับเลย์เอาต์ของเว็บไซต์ที่ปรับเปลี่ยนได้ตั้งแต่เริ่มต้น!

The Last of Us: การใช้ลูกคนสุดท้ายและคนสุดท้ายใน CSS

นำทาง { border-right: 1px solid # 000; }

nav a:last-child { ขอบขวา: ไม่มี; }

จากผู้เขียน: CSS pseudo-selectors like last เป็นอีกวิธีหนึ่งที่สะดวกในการแยกการนำเสนอออกจากมาร์กอัป: เพื่อไม่ให้ HTML ทิ้งขยะด้วยคลาสที่พยายามตั้งค่าคุณสมบัติบนองค์ประกอบสุดท้ายภายในบล็อก และเราต้องย้ายและกำหนดใหม่ หากเนื้อหามีการเปลี่ยนแปลง เราจะใช้ตัวเลือกที่จะใช้กับองค์ประกอบสุดท้ายเท่านั้นโดยไม่มีการเปลี่ยนแปลงในมาร์กอัป

โดยเฉพาะอย่างยิ่งมีผลในข้อ ดังในตัวอย่างข้างต้น ซึ่งทราบจำนวนบรรทัดในบทล่วงหน้า

วิธีที่แท้จริงในการใช้ Last-of-type คือการนำเอฟเฟ็กต์ภาพออกจากองค์ประกอบสุดท้ายเมื่อนำเอฟเฟ็กต์ไปใช้กับองค์ประกอบทั้งหมด ตัวอย่างเช่น แถบเมนู:

ยิ่งไปกว่านั้น รูปแบบสามารถเขียนใหม่ในบรรทัดเดียวโดยผสานกับ nav a:not(:last-child) { border-right: 1px solid #000; }.

<nav>

    <a href="#">หน้าแรก</a>

    <a href="#">เกี่ยวกับเรา</a>

    <a href="#">ผลิตภัณฑ์</a>

</nav>

<บทความ>

  <div>

    <p>คลื่นเมฆซัดเข้าหาฝั่ง</p>

    <p>พระอาทิตย์สองดวงจมหลังทะเลสาบ</p>

    <p>เงายาวขึ้น</p>

    <p>ในคาร์โคซ่า</p>

  </div>

  <div>

    <p>คืนที่ดาวสีดำขึ้นอย่างแปลกประหลาด</p>

    <p>และดวงจันทร์ประหลาดโคจรรอบท้องฟ้า</p>

    <p>แต่คนแปลกหน้าก็ยังเป็นอยู่</p>

    <p>แพ้คาร์โคซ่า</p>

  </div>

</article>

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

เข้าร่วมหลักสูตรและเรียนรู้วิธีสร้างเว็บไซต์ที่ทันสมัยใน HTML5 และ CSS3

เรียนรู้เพิ่มเติม

นาฬิกา

ตัวเลือกสุดท้ายของประเภทจะค้นหาการเกิดขึ้นครั้งสุดท้ายขององค์ประกอบในประเภทที่กำหนดและแก้ไข

บทความ p: ลูกคนสุดท้าย { ข้อความเยื้อง: 2rem; }

ที่มา: //thenewcode.com/

เอฟเฟกต์สามารถทำได้กับ nth-child:

The Last of Us: การใช้ลูกคนสุดท้ายและคนสุดท้ายใน CSS

บทความ p: สุดท้ายของประเภท { เยื้องข้อความ: 2rem; }

ในกรณีนี้ กฎนี้จะมีผลเช่นเดียวกันกับเนื้อหาเป็นลูกสุดท้าย สามารถใช้ตัวเลือกทั้งสองร่วมกับตัวเลือกอื่นๆ ได้ ตัวอย่างเช่น คุณสามารถเปลี่ยนการเกิดขึ้นล่าสุดของคลาสได้

บทความ p:nth-ลูก(4){

  ข้อความเยื้อง:2rem;

}

ลักษณะใช้งานได้ก็ต่อเมื่อย่อหน้านั้นเป็นย่อหน้าสุดท้ายในบล็อกเท่านั้น หากแต่ละย่อหน้าลงท้ายด้วยแถบแนวนอน:

บทบรรณาธิการ: ทีมงาน webformyself

แนวปฏิบัติของการจัดวางไซต์บน CSS Grid ตั้งแต่เริ่มต้น

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

และเราจะได้รับ:

<a href="#">บริการ</a>
} ตามตัวอักษร รายการด้านบนบอกให้เบราว์เซอร์ใส่ลิงก์ <a> ทั้งหมดภายในการนำทาง <nav> ทางด้านขวา ยกเว้นองค์ประกอบสุดท้าย ตัวเลือก CSS :ไม่ได้หมายถึง "ทุกอย่างยกเว้น" ชื่อของคลาส ตัวระบุ องค์ประกอบหลอก และชื่อแท็กถูกระบุไว้ในวงเล็บ

วิธีเพิ่มสไตล์ css ให้กับองค์ประกอบสุดท้าย

ตอนนี้เรารู้แล้วว่าเราสามารถรวมตัวเลือกต่างๆ ได้ มาเพิ่มการโต้ตอบในแถบนำทางของเรากัน ในการทำเช่นนี้ เราจะใช้ :hover state pseudo-class ซึ่งเพิ่มสไตล์ที่จำเป็นเมื่อวางเคอร์เซอร์ของเมาส์ไว้เหนือวัตถุ

<!DOCTYPE html>
		transform: scale(1.03);
			background: rgba(255,255,255,.1);
	nav a:hover{
	<nav>

เราจะไม่วิเคราะห์ตัวเลือกทั้งหมดสามสิบตัวเลือก เราจะใช้เฉพาะสิ่งที่หมายถึงองค์ประกอบสุดท้าย (: ลูกสุดท้าย) ก่อน (: ลูกคนแรก) ใน CSS และยังพิจารณาคลาสหลอกพิเศษ (:nth-child) ซึ่งช่วยให้คุณเข้าถึงองค์ประกอบย่อยด้วยหมายเลขซีเรียล เราจะเรียนรู้จากตัวอย่างการสร้างแถบนำทางของไซต์:

<!DOCTYPE html>
		<a href="#">Домой</a>
			color: #fff;
			text-decoration: none;
			justify-content: flex-end;
		nav{
		nav a:not(:last-child){
			margin: 0;
			width: 100%;
nav a:last-child{
		opacity: .8;
		nav a{
			font: bold 15px Arial, sans-serif;
width: 100%;
			background: #000;
border-right: 1px solid red;
			overflow: hidden;

บางครั้งคุณสามารถเห็นการสะกดสองครั้ง (::) ข้อมูลจำเพาะนี้ถูกเพิ่มใน CSS3 เพื่ออ้างถึง ::backdrop, ::before, ::after pseudo-elements ต่างกันตรงที่เพิ่มสไตล์ให้กับวัตถุที่ไม่ได้อยู่ในแผนผัง DOM ตัวอย่างเช่น อักษรตัวใหญ่หรือบรรทัดแรก

p::before{
		}

ทั่วไป :nth-ตัวเลือกลูก

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

/*добавит последнему элементу справа границу красного цвета*/
			display: flex;
			padding: 1em;
			color: red;
	nav a:nth-child(3):hover{
	nav a:nth-child(2):hover{
		border-color: #f69;
	<title>Document</title>

ด้วยความช่วยเหลือของตัวเลือก nav a:hover เราจึงสร้างมันขึ้นมาเพื่อให้ลักษณะของลิงก์เปลี่ยนไปทุกครั้งที่วางเคอร์เซอร์ ดังนั้นผู้ใช้จะโต้ตอบกับไซต์ได้ง่ายและน่าสนใจยิ่งขึ้น สังเกตรายการ nav a:nth-child(n) ด้วยเหตุนี้ แต่ละรายการในเมนูจึงมีสีที่ขีดเส้นใต้ในสถานะ :hover

วิธีเน้นองค์ประกอบสุดท้ายด้วย css

คุณสามารถไปต่อและเพิ่ม :focus และ :active ให้กับองค์ประกอบ <a> ซึ่งจะเปลี่ยนพฤติกรรมของลิงก์เมื่อคลิก หรือระบายสีด้วยสีอื่นและเพิ่มขนาดฟอนต์ในสถานะใช้งาน ตัวเลือก CSS ทำให้หน้า HTML แบบคงที่มีชีวิตชีวาโดยไม่ต้องมี JavaScript

นำทาง a:nth-child(-1):hover{
display: block;
ขอบสี: #46C5CD;
<a href="#">ข่าวสาร</a>
</nav>

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

วิธีจัดการกับ DOM และ CSS กฎรายการเมนูสุดท้าย

ไวยากรณ์และกฎสำหรับการใช้ pseudo-classes

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

li:last-child{
nav a:nth-child(-1){
	border-bottom: 1px solid yellow;
	<meta name="viewport" content="width=device-width, initial-scale=1">
			text-transform: uppercase;
			padding-right: 2em;
}

นอกเหนือจากค่าจำนวนเต็ม :nth-child ยอมรับคีย์เวิร์ดเป็นค่า:

  • คี่ - องค์ประกอบคี่;
  • แม้กระทั่ง - แม้กระทั่ง

ตอนนี้ หากต้องการเพิ่มเส้นขอบสีเหลืองให้กับลิงก์ทุกวินาทีในแถบนำทาง ให้เขียน:

nav a:nth-child(even){

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

nav a:first-child{
			transition: all .5s ease-in-out;
padding-bottom: 0;
content: '';
		<a href="#">Блог</a>
color: #222;
			padding: 0;
		border-bottom: 1px solid#D349CE;
		border-color: #3EDC79;
}

การใช้คลาสหลอกร่วมกัน

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

nav a:not(:last-child){
		body{
padding-right: 10px;
			color: green;

 

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

วิธีจัดการกับ DOM และ CSS กฎรายการเมนูสุดท้าย

เราจะไม่วิเคราะห์ตัวเลือกทั้งหมดสามสิบตัวเลือก เราจะใช้เฉพาะสิ่งที่หมายถึงองค์ประกอบสุดท้าย (: ลูกสุดท้าย) ก่อน (: ลูกคนแรก) ใน CSS และยังพิจารณาคลาสหลอกพิเศษ (:nth-child) ซึ่งช่วยให้คุณเข้าถึงองค์ประกอบย่อยด้วยหมายเลขซีเรียล เราจะเรียนรู้จากตัวอย่างการสร้างแถบนำทางของไซต์:

<!DOCTYPE html>  <html lang="ru">  <head>  	<meta charset="UTF-8">  	<title>Document</title>  	<meta name="viewport" content="width=device-width, initial-scale=1">  	<style>  		body{  			width: 100%;  			padding: 0;  			margin: 0;  			background: #000;  		}  		nav{  			display: flex;  			justify-content: flex-end;  			width: 100%;  			margin: 0;  			padding: 0;  			background: rgba(255,255,255,.1);    		}  		nav a{  			color: #fff;  			text-decoration: none;  			text-transform: uppercase;  			font: bold 15px Arial, sans-serif;  			padding: 1em;  		}  	</style>  </head>  <body>  	<nav>  		<a href="#">Домой</a>  		<a href="#">Новости</a>  		<a href="#">Услуги</a>  		<a href="#">Блог</a>  	</nav>  </body>  </html>  

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

nav a:first-child{  			color: green;  		}  nav a:last-child{  			color: red;  		}

ทั่วไป :nth-ตัวเลือกลูก

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

/*добавит последнему элементу справа границу красного цвета*/  nav a:nth-child(-1){  border-right: 1px solid red;  }

นอกเหนือจากค่าจำนวนเต็ม :nth-child ยอมรับคีย์เวิร์ดเป็นค่า:

  • คี่ - องค์ประกอบคี่;
  • แม้กระทั่ง - แม้กระทั่ง

ตอนนี้ หากต้องการเพิ่มเส้นขอบสีเหลืองให้กับลิงก์ทุกวินาทีในแถบนำทาง ให้เขียน:

nav a:nth-child(even){  	border-bottom: 1px solid yellow;  }

การใช้คลาสหลอกร่วมกัน

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

nav a:not(:last-child){  padding-right: 10px;  }

คำต่อคำ รายการด้านบนบอกให้เบราว์เซอร์ใส่ลิงก์ <a> ทั้งหมดภายในการนำทาง <nav> ทางด้านขวา ยกเว้นองค์ประกอบสุดท้าย ตัวเลือก CSS :ไม่ได้หมายถึง "ทุกอย่างยกเว้น" ชื่อของคลาส ตัวระบุ องค์ประกอบหลอก และชื่อแท็กถูกระบุไว้ในวงเล็บ

วิธีเพิ่มสไตล์ css ให้กับองค์ประกอบสุดท้าย

ตอนนี้เรารู้แล้วว่าเราสามารถรวมตัวเลือกต่างๆ ได้ มาเพิ่มการโต้ตอบในแถบนำทางของเรากัน ในการทำเช่นนี้ เราจะใช้ :hover state pseudo-class ซึ่งเพิ่มสไตล์ที่จำเป็นเมื่อวางเคอร์เซอร์ของเมาส์ไว้เหนือวัตถุ

<!DOCTYPE html>  <html lang="ru">  <head>  	<meta charset="UTF-8">  	<title>Document</title>  	<meta name="viewport" content="width=device-width, initial-scale=1">  	<style>  		body{  			width: 100%;  			padding: 0;  			margin: 0;  			background: #000;  		}  		nav{  			display: flex;  			justify-content: flex-end;  			width: 100%;  			margin: 0;  			padding: 0;  			background: rgba(255,255,255,.1);  			overflow: hidden;  		}  		nav a{  			color: #fff;  			text-decoration: none;  			text-transform: uppercase;  			font: bold 15px Arial, sans-serif;  			padding: 1em;  			transition: all .5s ease-in-out;  		}  		nav a:not(:last-child){  			padding-right: 2em;  		}    	nav a:hover{  		border-bottom: 1px solid#D349CE;  		transform: scale(1.03);  		opacity: .8;  	}  	nav a:nth-child(2):hover{  		border-color: #46C5CD;  	}  	nav a:nth-child(3):hover{  		border-color: #3EDC79;  	}  	nav a:nth-child(-1):hover{  		border-color: #f69;  	}  	</style>  </head>  <body>  	<nav>  		<a href="#">Домой</a>  		<a href="#">Новости</a>  		<a href="#">Услуги</a>  		<a href="#">Блог</a>  	</nav>  </body>  </html>  

ด้วยความช่วยเหลือของตัวเลือก nav a:hover เราจึงสร้างมันขึ้นมาเพื่อให้ลักษณะของลิงก์เปลี่ยนไปทุกครั้งที่วางเคอร์เซอร์ ดังนั้นผู้ใช้จะโต้ตอบกับไซต์ได้ง่ายและน่าสนใจยิ่งขึ้น สังเกตรายการ nav a:nth-child(n) ด้วยเหตุนี้ แต่ละรายการในเมนูจึงมีสีที่ขีดเส้นใต้ในสถานะ :hover

วิธีเน้นองค์ประกอบสุดท้ายด้วย css

คุณสามารถไปต่อและเพิ่ม :focus และ :active ให้กับองค์ประกอบ <a> ซึ่งจะเปลี่ยนพฤติกรรมของลิงก์เมื่อคลิก หรือระบายสีด้วยสีอื่นและเพิ่มขนาดฟอนต์ในสถานะใช้งาน ตัวเลือก CSS ทำให้หน้า HTML แบบคงที่มีชีวิตชีวาโดยไม่ต้องมี JavaScript

</html>
<li>1</li>3.1+

ไวยากรณ์

ข้อมูลสั้นๆ

#primer tr: first-child td { สีพื้นหลัง: สีแดง; }

ไปยังองค์ประกอบทั้งหมด ซึ่งสามารถทำได้ด้วยตัวเลือก ซึ่งเป็นคลาสหลอกที่เรียกว่า Last-child

</div>

  • นิพจน์เช่น an+b

<tr>
ตัวเลือก CSS

:nth-last-child(n) pseudo-class เลือกทุกองค์ประกอบที่เป็นลูกของพาเรนต์ (นับจากลูกสุดท้าย)

ถ้า a เป็นศูนย์ จะไม่ถูกเขียนและสัญกรณ์จะลดลงเป็น b ถ้า b เป็นศูนย์ ก็จะถูกละเว้นและนิพจน์จะถูกเขียนในรูปแบบ a a และ b สามารถเป็นตัวเลขติดลบได้ ซึ่งในกรณีนี้เครื่องหมายบวกจะเปลี่ยนเป็นลบ เช่น 5n-1

2.1

#primer td:nth-child (3) { สีพื้นหลัง: สีเขียว; }
.block {
CSS3

4.1

<บทความ>

2n+15.1

โดยใช้ค่าลบสำหรับ a และ b ผลลัพธ์บางอย่างอาจเป็นค่าลบหรือศูนย์ก็ได้ อย่างไรก็ตาม องค์ประกอบได้รับผลกระทบจากค่าบวกเท่านั้น เนื่องจากองค์ประกอบเริ่มต้นจาก 1

อย่าโพสต์รหัสของคุณโดยตรงในความคิดเห็น มันแสดงไม่ถูกต้อง

หลอกคลาส nth-last-child()

มีโอกาสที่จะส่งคำขออย่างเป็นทางการไปยังช่องว่างภายในหลัก: 10px; /* ขอบรอบข้อความ */

ตัวอย่างเช่น ลองใช้รหัสเดียวกับในบันทึกย่อก่อนหน้า:

 

สำหรับงานนี้ ทางเลือกที่ดีที่สุดคือการใช้ :nth-last-of-type() ด้วยเหตุผลวัตถุประสงค์:

td: อันดับแรกของประเภท {

  • นิพจน์เช่น an+b

 

องค์ประกอบคู่ทั้งหมด เทียบเท่ากับคู่

 

1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4

ในฐานะพารามิเตอร์ คุณสามารถตั้งค่านิพจน์ เช่น "an + b" โดยที่ "a" และ "b" เป็นจำนวนเต็ม และ "n" เป็นตัวแปรที่เปลี่ยนตามลำดับจาก 0 เป็นจำนวนองค์ประกอบตัวเลือก พิจารณาตัวอย่างการเน้นสีแดงเฉพาะสองแถวแรกและทุกคอลัมน์ที่สี่

 

ค่านิยม

 

:nth-last-child(หมายเลข) {
p:nth ของประเภท (2) {
    เส้นขอบ: 1px ทึบ #333; /* ตัวเลือกเฟรม */
    #primer tr:nth-last-child(1) td:nth-last-child(1) {background-color:green;}2.1+

<p>ย่อหน้าแรก</p>

องค์ประกอบที่ห้าจากจุดสิ้นสุด

 

ข้อมูลสั้นๆ

 

ไวยากรณ์

 

การเลือกองค์ประกอบสามรายการสุดท้ายของรายการ:

#primer tr:nth-child(1) td:nth-child(1) {background-color:red;}

CSS 2.1

ซาฟารี 

  • หมายเลข - เลือกองค์ประกอบที่มีหมายเลขซีเรียลเฉพาะ

li:nth-ลูก(3n+1)

  • "คู่" - เลือกองค์ประกอบคู่;
  • "nth-child" - เลือกองค์ประกอบตามพารามิเตอร์ตั้งแต่เริ่มต้น

รองรับเบราว์เซอร์

  • "คู่" - เลือกองค์ประกอบคู่;

<style>
<a href = "https://i1.wp.com/i1.wp.com/ya.ru">ลิงก์แหล่งข้อมูล</h3>ในโพสต์ที่แล้ว เราได้เรียนรู้วิธีการเลือกองค์ประกอบแรกใน องค์ประกอบหลักที่มีตัวเลือกลูกคนแรก มาเรียนรู้วิธีเลือกองค์ประกอบสุดท้ายในบล็อกหลักกัน td:nth-last-child(4) {<td> </td><td>2134</td><td>2135</td>
ความสูง: 5px; /* ความสูงของบล็อก */
สีพื้นหลัง: สีเทา;ขอบซ้าย: 3px สองเท่า #333; /* ขอบซ้าย */<บทความ> กำลังอ่าน 3 นาที เข้าชม 2 โพสต์ด้วย "ลูกคนแรก" และ "ลูกคนสุดท้าย" คุณสามารถเลือกและจัดรูปแบบองค์ประกอบแรกหรือองค์ประกอบสุดท้ายของผู้ปกครองได้ ลองดูว่ามันมีลักษณะอย่างไรในตัวอย่าง เมื่อต้องการทำเช่นนี้ นำสไตล์ไปใช้กับเซลล์ตารางด้วยตัวระบุ "primer" (id="primer")
pseudocas "nth-child" ให้ความเป็นไปได้ที่น่าสนใจมากขึ้น ช่วยให้คุณสามารถจัดรูปแบบองค์ประกอบตามคำสั่งในแผนผัง DOM คลาสหลอกสามารถรับพารามิเตอร์:#primer tr:nth-child (คี่) td { สีพื้นหลัง: สีแดง; } p:nth-child(2) { 3.6+

มาลองทั้งสองตัวเลือกกัน: รูปที่ 1. ใช้ :nth-last-child pseudo-class กับคอลัมน์ของ <td>Stones</td><td>23</td><td>34</td> ตารางสีของคอลัมน์คี่ทั้งหมด เริ่มจากอันสุดท้าย (รูปที่ 1).</style>
พื้นหลัง: #eb9; /* สีพื้นหลัง */
สี: #fff; /* สีข้อความ */td {
<title>Pseudo-classes :nth-last-of-type() and :nth-last-child()</title>

  • หมายเลข - เลือกองค์ประกอบที่มีหมายเลขซีเรียลเฉพาะ

p:nth-last-of-type(2) {
<li>2</li>p:nth-last-of-type(2) { nth-child()
ตัวอย่าง 1. ผลลัพธ์ของการใช้ :last-child pseudo-class
แต่ต่างกันอย่างไร? <td>88</td><td>53</td><td>103</td>

  • "ลูกคนแรก" - เลือกองค์ประกอบแรกของผู้ปกครอง

<p>ย่อหน้าที่สอง</p> พื้นหลัง: #7da7d9; /* สีพื้นหลัง */ <tr>

  • "ลูกคนแรก" - เลือกองค์ประกอบแรกของผู้ปกครอง

ตาราง { <title>Pseudo-classes และ pseudo-elements</title> border-collapse: ยุบ; /* Remove double borders */ The :nth-last-child() pseudo-class ให้คุณเลือกไม่เพียงแต่ค่าคู่และคี่เท่านั้น แต่ยังรวมถึงค่าที่กำหนดโดยสูตรบางอย่าง นอกจากนี้ยังอนุญาตให้ระบุเพียงตัวเลขโดยใช้ค่าลบและค่าบวก บันทึกรหัส และให้ลิงก์ในความคิดเห็น จึงจะเห็นผลทันที
ในการดำเนินการนี้ หลังจากเนื้อหาหลักของบทความ เราวางลิงก์ - องค์ประกอบ <a> ไปที่หน้า
CSS pseudo-classes สามารถใช้กับองค์ประกอบใดก็ได้ในเอกสาร html
<title>last-child</title>li:nth-child(n+3) :last-child pseudo-class style เป็นอิลิเมนต์สุดท้ายของพาเรนต์

ค่าเริ่มต้น องค์ประกอบสุดท้ายคือคำพ้องความหมายสำหรับ :last-child pseudo-class 9.6+ Firefox https://i1.wp.com/i1.wp.com/www.w3.org/TR/css3-selectors/#nth-last-child-pseudo
1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4
3, 2, 1 3, 8, 13, 18, 23
แปลก
1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4
5n-2 องค์ประกอบคี่ทั้งหมด เทียบเท่ากับคี่

คำอธิบาย

ในตาราง. 1 แสดงรายการนิพจน์และคีย์เวิร์ดที่เป็นไปได้ และระบุว่าจะใช้หมายเลของค์ประกอบใด

    • "คี่" - เลือกองค์ประกอบคี่
    • 2.0+

td:nth-last-of-type (2n+1) {
#primer td:nth-child (2) { สีพื้นหลัง: สีแดง; }
สีพื้นหลัง:สีกากี;

ในตัวอย่างนี้ :nth-last-child() pseudo-class จะเลือกองค์ประกอบนี้หากเป็นย่อหน้าและเป็นองค์ประกอบที่สองขององค์ประกอบหลักเดียวกัน ( นับจากลูกสุดท้าย )

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

Pseudo-class :last-child | htmlbook.ru

pseudo-class :nth-last-child ใช้เพื่อจัดรูปแบบองค์ประกอบตามการกำหนดหมายเลขในแผนผังองค์ประกอบ ไม่เหมือนกับ :nth-child pseudo-class ซึ่งไม่นับตั้งแต่องค์ประกอบแรก แต่นับจากองค์ประกอบสุดท้าย

<td>ทอง</td><td>4</td><td>69</td>
<title>nth-last-of-type</title>

<td>62</td><td>74</td><td>57</td>
สีพื้นหลัง: lime;ไม่น่าแปลกใจเลยที่ตัวเลือกทั้งสองทำงานสำหรับงานนี้และเน้นย่อหน้าแรก<div>

Internet Explorer 2, 4, 6, 8, 10 องค์ประกอบแปลกทั้งหมด

ในฐานะพารามิเตอร์ คุณสามารถตั้งค่านิพจน์ เช่น "an + b" โดยที่ "a" และ "b" เป็นจำนวนเต็ม และ "n" เป็นตัวแปรที่เปลี่ยนตามลำดับจาก 0 เป็นจำนวนองค์ประกอบตัวเลือก พิจารณาตัวอย่างการเน้นสีแดงเฉพาะสองแถวแรกและทุกคอลัมน์ที่สี่

#primer tr:last-child td { สีพื้นหลัง: สีเขียว; }
#primer td:nth-child (4n+4) { สีพื้นหลัง: สีแดง; }

1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8
2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8
4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8

การเลือกเพียงสามองค์ประกอบแรกของรายการ:

ไวยากรณ์จะคล้ายกันที่นี่:

    • ลิงก์ไปยังข้อกำหนด

#primer tr:nth-child(-n+2) td { สีพื้นหลัง:สีแดง; }

ตัวเลือก :nth-last-of-type() ยังคงทำงานโดยไม่มีการเปลี่ยนแปลง และตัวเลือก :nth-last-child() เริ่มที่จะทำลายราสเบอร์รี่ทั้งหมดของเรา เนื่องจากมันเลือกองค์ประกอบที่สองของผู้ปกครองคนหนึ่ง ( นับจาก องค์ประกอบลูกสุดท้าย ) และสิ่งนี้ตามที่คุณเข้าใจด้วยการเพิ่มไฮเปอร์ลิงก์กลายเป็นย่อหน้าที่สอง

ตัวอย่างของการใช้คลาสหลอก :nth-last-of-type() และ :nth-last-child()

อะไรจะเปลี่ยนไปในที่สุด?

<ตาราง>
ความกว้าง: 100%; /* ความกว้างของตาราง */

HTML5CSS3IECrOpSaFx

<td>น้ำมัน</td><td>16</td><td>34</td>
td:not(:first-of-type) {
บล็อกการประกาศ;

เราเริ่มเข้าใจ ลองใช้สไตล์กับตารางเพื่อตั้งค่าพื้นหลังสำหรับแถวคู่และคี่:

การเลือกเพียงสามองค์ประกอบแรกของรายการ:

    • โอเปร่า

#primer tr:nth-child (เท่ากัน) td { สีพื้นหลัง: สีเขียว; }

:last-child pseudo -class สามารถใช้สำหรับรายการโดยเฉพาะ ตัวอย่างเช่น หากคุณ
ตั้งค่าองค์ประกอบรายการเป็น border-bottom: 3px solid black; เป็นผลให้เส้นสีดำทึบที่มีความหนาสามพิกเซลปรากฏขึ้นใต้คำหรือประโยคทั้งหมดที่ประกอบขึ้นเป็นรายการ จากมุมมองด้านสุนทรียศาสตร์ ขีดเส้นใต้สุดท้ายสามารถลบออกได้โดยใช้ li:last-child โดยการตั้งค่าคุณสมบัติ border-bottom เป็นศูนย์

    • 3n+2
li:nth-ลูก(-n+3)
    • CSS 3

<td>72</td><td>56</td><td>47</td>
</tr>

    • 2, 5, 8, 11, 14 หมายเลขสินค้า

พื้นหลังสี: ส้ม;
</article>

เรากำลังเผชิญกับทางเลือกว่าจะใช้ p:nth-last-child(2) หรือ p:nth-last-of-type(2)

    • 3.1

เมื่อสิ้นสุดความสามารถในการทำความเข้าใจข้อมูลข้างต้น คุณ

    • 1.0+

ในตัวอย่างนี้ pseudo-class :nth-last-of-type ใช้เพื่อเน้นคอลัมน์ที่เป็นเลขคี่ทั้งหมด โดยเริ่มจากคอลัมน์สุดท้าย (รูปที่ 1)

การใช้ :nth-last-of-type Pseudo-Class กับคอลัมน์ตาราง

ข้าว. 1. การใช้ :nth-last-of-type pseudo-class กับคอลัมน์ตาราง

สเปค ?

ข้อมูลจำเพาะ

ข้อกำหนดแต่ละข้อต้องผ่านการอนุมัติหลายขั้นตอน

    • คำแนะนำ - ข้อมูลจำเพาะได้รับการอนุมัติโดย W3C และแนะนำให้ใช้เป็นมาตรฐาน
    • คำแนะนำสำหรับผู้สมัคร - กลุ่มที่รับผิดชอบด้านมาตรฐานพอใจว่าเป็นไปตามเป้าหมาย แต่ชุมชนนักพัฒนาต้องการความช่วยเหลือในการนำมาตรฐานไปใช้
    • ข้อเสนอแนะที่เสนอ - ณ จุดนี้ เอกสารจะถูกส่งไปยังคณะกรรมการที่ปรึกษา W3C เพื่อขออนุมัติขั้นสุดท้าย
    • Working Draft - ร่างฉบับที่เป็นผู้ใหญ่มากขึ้นหลังจากการอภิปรายและแก้ไขเพื่อทบทวนโดยชุมชน
    • ฉบับร่างบรรณาธิการ - ฉบับร่างของมาตรฐานภายหลังการแก้ไขโดยบรรณาธิการโครงการ
    • Draft (ข้อกำหนดฉบับร่าง) - ฉบับร่างฉบับแรกของมาตรฐาน

×

เบราว์เซอร์

สัญกรณ์ต่อไปนี้ใช้ในตารางเบราว์เซอร์

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

ตัวเลขระบุเวอร์ชันของเบราว์เซอร์ที่รองรับคุณสมบัติ

×

ผู้เขียนและบรรณาธิการ

ผู้เขียน : Vlad Merzhevich

ปรับปรุงล่าสุด: 08/06/2018

บรรณาธิการ: Vlad Merzhevich


หลักสูตรเกี่ยวกับการจัดวางเว็บไซต์บน CSS Grid

คลาสหลอก :nth-last-child() | การอ้างอิง CSS

    • ใช้

มันยังคงแยกวิเคราะห์คลาสหลอก "nth-last-child" ความแตกต่างจาก "nth-child" คือการนับถอยหลังทั้งหมดมาจากจุดสิ้นสุดของตัวเลือก ตัวอย่างคือสถานการณ์ที่คุณต้องการเลือกเซลล์ในตาราง "TOTAL" โดยทั่วไป นี่คือเซลล์สุดท้ายของแถวสุดท้าย:

      • "ลูกคนสุดท้าย" - เหมือนกัน แต่เริ่มจากจุดสิ้นสุด

Pseudo-class last-child - เลือกสุดท้าย ตามลำดับตำแหน่งในรหัส องค์ประกอบลูก ซึ่งอยู่ในองค์ประกอบหลัก

ความสำคัญและการประยุกต์ใช้

<p>ย่อหน้าแรก</p>

    • 9.0+

หากคุณระบุตัวเลขเป็นพารามิเตอร์ให้กับ nth-child() คุณสามารถเลือกองค์ประกอบตามหมายเลขลำดับภายในพาเรนต์ได้:

pseudocas "nth-child" ให้ความเป็นไปได้ที่น่าสนใจมากขึ้น ช่วยให้คุณสามารถจัดรูปแบบองค์ประกอบตามคำสั่งในแผนผัง DOM คลาสหลอกสามารถรับพารามิเตอร์:

ระยะขอบ: 0; /* ระยะห่างระหว่างเซลล์ */
<style type = "text/css">

1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4

หากคุณระบุตัวเลขเป็นพารามิเตอร์ให้กับ nth-child() คุณสามารถเลือกองค์ประกอบตามหมายเลขลำดับภายในพาเรนต์ได้:

ค่านิยม

การใช้ Pseudo-Classes ใน CSS เพื่อเลือก Elements

css องค์ประกอบรายการสุดท้าย | เกี่ยวกับ Windows 10

เลือกทุกองค์ประกอบที่สามของรายการ:

css องค์ประกอบคลาสสุดท้าย | เกี่ยวกับ Windows 10

อ่าน 4 นาที เข้าชม 2 โพสต์

2n

<!DOCTYPE html>
<li>4</li>
    • "ลูกคนสุดท้าย" - ชี้ไปที่องค์ประกอบสุดท้ายของผู้ปกครอง

 

สมมติว่าเรามีบทความที่มีสองย่อหน้า และเราต้องการจัดรูปแบบย่อหน้าแรกให้แตกต่างจากย่อหน้าแรกโดยตั้งค่าสีพื้นหลังเป็นสีกากี (ในวิธีที่ยุ่งยากมาก...):

 

เวอร์ชัน CSS

ตัวเลือก CSS

 

CSS2 

หลอกคลาส nth-last-child()

 

โครเมียม 

iOS ด้วย "ลูกคนแรก" และ "ลูกคนสุดท้าย" คุณสามารถเลือกและจัดรูปแบบองค์ประกอบแรกหรือองค์ประกอบสุดท้ายของผู้ปกครองได้ ลองดูว่ามันมีลักษณะอย่างไรในตัวอย่าง เมื่อต้องการทำสิ่งนี้ นำสไตล์ไปใช้กับเซลล์ตารางด้วยตัวระบุ "primer" ( )

.block : ลูกคนแรก {

HTML5 CSS3 IE Cr Op Sa Fx

<div>

สีพื้นหลัง: สีกากี ตัวอย่างการใช้ nth-child() ตัวอย่าง td
:nth-last-child(2) { Pseudo-class nth- last-child()
1. ในตัวอย่างนี้ :last-child pseudo-class ใช้เพื่อกำหนดรูปแบบของแท็ก <div> สุดท้ายที่อยู่ภายในคอนเทนเนอร์ที่มีบล็อกชื่อคลาส ทำให้สามารถสร้างแถบสีที่ด้านล่างของบล็อกได้โดยไม่ต้องรวมคลาสใหม่

เราเริ่มเข้าใจ ลองใช้สไตล์กับตารางเพื่อตั้งค่าพื้นหลังเป็นแถวคู่และคี่: ตัวอย่างการใช้ nth-child()
และ :nth-last-of-type() จะเลือกองค์ประกอบหากเป็นย่อหน้าที่สองของพาเรนต์เดียวกัน ( นับจากลูกคนสุดท้าย )<p> ย่อหน้าที่สอง</p>ในขณะนี้ทุกอย่างใช้ได้กับเรา แต่เราจำได้ว่าในบทความคุณต้องระบุลิงก์ไปยังแหล่งที่มา td:nth-last-child(2n +1) { element:last-child { … }
ไวยากรณ์ CSS :
มันยังคงแยกวิเคราะห์คลาสหลอก "nth-last-child" ความแตกต่างจาก "nth-child" คือการนับถอยหลังทั้งหมดมาจากจุดสิ้นสุดของตัวเลือก ตัวอย่างคือสถานการณ์ที่คุณต้องการเลือกเซลล์ในตาราง "TOTAL" โดยทั่วไป นี่คือเซลล์สุดท้ายของบรรทัดสุดท้าย:
Pseudo-class :nth-last-of-type | css | อ้างอิงเว็บpseudo-class :nth-last-of-type ใช้เพื่อจัดรูปแบบองค์ประกอบของประเภทที่ระบุตามการกำหนดหมายเลขในแผนผังองค์ประกอบ ไม่เหมือน :nth-of-type pseudo-class การนับถอยหลังไม่ได้มาจากองค์ประกอบแรก แต่มาจากองค์ประกอบสุดท้าย ไวยากรณ์ ? <td>79</td><td>34</td><td>86</td> ตัวอย่างการใช้ <td>2136</td><td>2137</td><td>2138</td >

  • "ลูกคนสุดท้าย" - เหมือนกัน แต่เริ่มจากจุดสิ้นสุด

CSS pseudo-classes สามารถใช้กับองค์ประกอบใด ๆ ในเอกสาร html..block :last-child { พื้นหลัง: #f0f0f0; /* สีพื้นหลัง */

  • "ลูกคนสุดท้าย" - ชี้ไปที่องค์ประกอบสุดท้ายของผู้ปกครอง

ผู้อยู่ใต้บังคับบัญชาของจักรวาลเสมือนในท้องถิ่น 1, 3, 5, 7, 9
Селектор:nth-last-of-type(odd | even | <число> | <выражение>) {...}สัญลักษณ์ × ค่าoddAll หมายเลของค์ประกอบคี่ทั้งหมด เริ่มต้นจาก end.evenAll หมายเลของค์ประกอบทั้งหมด เริ่มต้นจากจุดสิ้นสุด<number>หมายเลขลำดับขององค์ประกอบย่อยที่สัมพันธ์กับพาเรนต์ การกำหนดหมายเลขเริ่มต้นจาก 1 ซึ่งสอดคล้องกับองค์ประกอบสุดท้ายในรายการ<expression>ระบุเป็น an±b โดยที่ a และ b เป็นจำนวนเต็ม และ n คือตัวนับที่รับค่า 0, 1, 2,... ถ้า a โดยอัตโนมัติ เป็นศูนย์ จากนั้นจะไม่ถูกเขียนและรายการจะลดลงเหลือ b ถ้า b เป็นศูนย์ ก็จะไม่ระบุด้วย และนิพจน์จะถูกเขียนในรูปแบบ an a และ b สามารถเป็นตัวเลขติดลบได้ ซึ่งในกรณีนี้ เครื่องหมายบวกจะเปลี่ยนเป็นลบ เช่น 5n-1 โดยการใช้ค่าลบสำหรับ a และ b ผลลัพธ์บางอย่างอาจกลายเป็นลบหรือเท่ากับศูนย์ได้ . อย่างไรก็ตามองค์ประกอบได้รับผลกระทบจากค่าบวกเท่านั้นเนื่องจากความจริงที่ว่า ว่าการนับองค์ประกอบเริ่มต้นจาก 1 ในตาราง 1 แสดงรายการนิพจน์และคีย์เวิร์ดที่เป็นไปได้ และระบุว่าจะใช้หมายเลของค์ประกอบใด การนับถอยหลังมาจากองค์ประกอบสุดท้ายตัวอย่างการใช้ :nth-last-child() pseudo-class ใน CSS มาดูตัวอย่างที่สำคัญอีกตัวอย่างหนึ่งเพื่อทำความเข้าใจความแตกต่างระหว่าง :nth-last-child และ :nth-last-of-type() การเลือกองค์ประกอบสามรายการสุดท้ายของรายการ: แท็บ 1. ผลลัพธ์สำหรับค่าคลาสหลอกที่เติมต่างๆ: 3px; /* ฟิลด์ในเซลล์ */</table>พื้นหลัง: #dda458 url(images/line.png) ทำซ้ำ-x; /* การตั้งค่าพื้นหลัง */ ใช้ cssdeck.com หรือ jsfiddle.net, เวอร์ชัน CSS :last-child pseudo-class กำหนดรูปแบบขององค์ประกอบสุดท้ายในกลุ่มขององค์ประกอบพี่น้องกัน (ที่มีพาเรนต์เดียวกัน)<!DOCTYPE html>
<td>Дерево</td><td>7</td><td>73</td>


pseudo-class :last-child ที่ไม่มีตัวเลือกจะเลือกองค์ประกอบสุดท้ายทั้งหมดภายใน <article> และตั้งค่าสีข้อความเป็นสีแดง ที่นี่ <p> และ <เวลา> จะอยู่ท้ายสุดและจะถูกเลือก

เมื่อเพิ่มตัวเลือกใน :last-child องค์ประกอบสุดท้ายจะถูกใช้ก่อน จากนั้นจะพิจารณาว่าเป็นประเภทใด หากองค์ประกอบตรงกับตัวเลือกที่ระบุ องค์ประกอบนั้นจะถูกเลือก ดังนั้น องค์ประกอบจะถูกเลือกหากเป็นไปตามสองเงื่อนไขในเวลาเดียวกัน: เป็นองค์ประกอบสุดท้ายและเป็นองค์ประกอบประเภทที่ระบุ ในที่นี้ ย่อหน้าจะถูกเน้นด้วยสีแดง เนื่องจากย่อหน้าสุดท้ายคือ <p>

หากใช้ตัวเลือกอื่นแทน p จะไม่มีการเลือกใดๆ เนื่องจากไม่ตรงตามเงื่อนไข "องค์ประกอบสุดท้ายคือ <h2>"

ในการเลือกองค์ประกอบสุดท้ายของประเภทใดประเภทหนึ่ง ให้ใช้ :last-of-type pseudo-class

แทนที่จะยอมรับ :last-child :nth-last-child(1) ได้

ผลลัพธ์ของตัวอย่างแสดงในรูปที่ 1. ในตัวอย่างนี้ :last-child pseudo-class ถูกใช้เพื่อจัดรูปแบบองค์ประกอบ <div> สุดท้ายภายในคอนเทนเนอร์ที่มีบล็อกชื่อคลาส ทำให้สามารถสร้างแถบสีที่ด้านล่างของบล็อกได้โดยไม่ต้องรวมคลาสใหม่

ข้าว. 1. ผลลัพธ์ของการใช้ :last-child pseudo-class

ข้อกำหนดแต่ละข้อต้องผ่านการอนุมัติหลายขั้นตอน

สัญกรณ์ต่อไปนี้ใช้ในตารางเบราว์เซอร์

ตัวเลขระบุเวอร์ชันของเบราว์เซอร์ที่รองรับคุณสมบัติ


หลักสูตรเกี่ยวกับการจัดวางเว็บไซต์บน CSS Grid

การเลือกองค์ประกอบใน CSS ผ่าน pseudo-classes - first-child, last-child และ nth-child

 

เลือกทุกองค์ประกอบที่สามของรายการ:

 

Internet Explorer
1.1
คำอธิบาย ตัวอย่าง
<type> ระบุชนิดของค่า <ขนาด>
เอ&&บี ค่าจะต้องถูกส่งออกในลำดับที่ระบุ <ขนาด> && <สี>
A | บี ระบุว่าควรเลือกค่าที่แนะนำเพียงค่าเดียว (A หรือ B) ปกติ | หมวกใบเล็ก
A || บี แต่ละค่าสามารถใช้แยกกันหรือใช้ร่วมกับค่าอื่นในลำดับใดก็ได้ ความกว้าง || นับ
[ ] ค่าของกลุ่ม [ ครอบตัด || ข้าม]
* ทำซ้ำศูนย์หรือมากกว่าครั้ง [,<เวลา>]*
+ ทำซ้ำอย่างน้อยหนึ่งครั้ง <หมายเลข>+
? ประเภท คำ หรือกลุ่มที่ระบุเป็นตัวเลือก แทรก?
{ก, ข} ทำซ้ำอย่างน้อย A แต่ไม่เกิน B ครั้ง <รัศมี>{1}4}
# ทำซ้ำอย่างน้อยหนึ่งครั้งโดยคั่นด้วยเครื่องหมายจุลภาค <เวลา>#
แท็บ 1. ผลลัพธ์ของค่าคลาสหลอกต่างๆ
ความหมาย หมายเลขสินค้า คำอธิบาย
หนึ่ง หนึ่ง องค์ประกอบสุดท้ายคือคำพ้องความหมายสำหรับ :last-of-type pseudo-class
5 5 องค์ประกอบที่ห้าจากจุดสิ้นสุด
2n 2, 4, 6, 8, 10,… องค์ประกอบที่เท่ากันทั้งหมด เริ่มจากจุดสิ้นสุด อะนาล็อกของค่าคู่
2n+1 1, 3, 5, 7, 9,… องค์ประกอบแปลก ๆ ทั้งหมดเริ่มจากจุดสิ้นสุด อะนาล็อกของค่าคี่
3n 3, 6, 9, 12,… ทุกองค์ประกอบที่สาม เริ่มจากจุดสิ้นสุด
3n+2 2, 5, 8, 11, 14,… ทุกองค์ประกอบที่สาม เริ่มต้นด้วยองค์ประกอบสุดท้าย
n+4 4, 5, 6, 7, 8,… องค์ประกอบทั้งหมดยกเว้นสามรายการสุดท้าย
-n+3 3, 2, 1 สามองค์ประกอบสุดท้าย
5n-2 3, 8, 13, 18, 23,…
สม่ำเสมอ 2, 4, 6, 8, 10,… องค์ประกอบที่เท่ากันทั้งหมด เริ่มจากจุดสิ้นสุด
แปลก 1, 3, 5, 7, 9,… องค์ประกอบแปลก ๆ ทั้งหมดเริ่มจากจุดสิ้นสุด
สม่ำเสมอ
ความหมาย
-n+3
  • "คี่" - เลือกองค์ประกอบคี่

<li>3</li> p:nth-last-child(2) { เวอร์ชัน CSS

css 1

คำอธิบาย

 

ทุกองค์ประกอบที่เท่าเทียมกัน
<h2>หัวเรื่องแรก</h2> เส้นขอบ: ไม่มี; <style>

ที่นี่ pseudo-class โดยไม่ระบุตัวเลือก :last-child(1) จะเลือกองค์ประกอบสุดท้าย <p>ย่อหน้าที่สอง</p> p:last-child(1) จะเลือกย่อหน้าเดียวกันเพราะเป็นทั้งย่อหน้าสุดท้ายและเป็นองค์ประกอบ <p> h2:last-child(1) จะไม่เลือกสิ่งใดเนื่องจากสองเงื่อนไขไม่ตรงกันในเวลาเดียวกัน: องค์ประกอบสุดท้ายและองค์ประกอบ <h2> ในกรณีนี้ h2:last-child(2) จะเลือก <h2>หัวข้อที่สอง</h2> ซึ่งมีเงื่อนไขเหมือนกันอยู่แล้ว: องค์ประกอบ <h2> และองค์ประกอบสุดท้าย

<button>คำแนะนำเพิ่มเติม</button> <h2>หัวข้อที่สอง</h2>

สององค์ประกอบสุดท้าย

 

ข้าว. 1. ซ่อนย่อหน้าสุดท้าย

ปุ่ม {

เลือกองค์ประกอบสุดท้าย คล้ายกับ :last-child

</style>

คลาสหลอก :nth-of-type() ทำงานคล้ายกัน แต่จะเลือกเฉพาะองค์ประกอบของประเภทที่ระบุเท่านั้น ดังนั้น h2:nth-last-type(1) หมายถึงการเลือกองค์ประกอบ <h2> สุดท้าย การมีอยู่ขององค์ประกอบประเภทอื่น (<p>) จะถูกละเว้น สำหรับ HTML ด้านบน h2:nth-last-type(1) จะเลือกสตริง <h2>Second Heading</h2> เนื่องจากเป็นองค์ประกอบ <h2> สุดท้ายภายใน <section>

 

คลาสหลอก :nth-child() และ :nth-of-type() เลือกองค์ประกอบที่กำหนดจากกลุ่มขององค์ประกอบพี่น้องโดยเริ่มจากองค์ประกอบแรก ในทางตรงกันข้าม :nth-last-child() และ :nth-last-of-type() pseudo-class เลือกองค์ประกอบจากองค์ประกอบสุดท้าย

 

แทนที่จะใช้ p:nth-last-of-type(1) คุณสามารถใช้ p:last-of-type เพื่อเลือกย่อหน้าสุดท้าย หรือ p:nth-of-type(n+1) เพื่อเลือกย่อหน้าทั้งหมดยกเว้นวรรคแรก .

<!DOCTYPE html> <p>ไม่มีคำแนะนำที่ไม่สามารถให้ได้</p> </section> padding: 0.5rem 1rem; /* ขอบรอบข้อความ */

:nth-last-child(-n+2)

องค์ประกอบทั้งหมดยกเว้นสองรายการสุดท้าย

<p>ย่อหน้าแรก</p>

องค์ประกอบแปลก ๆ ทั้งหมดเริ่มจากจุดสิ้นสุด

<section>
p:nth-last-of-type(1) {

h2:last-child(1) pseudo-class เลือกองค์ประกอบสุดท้ายในกลุ่ม จากนั้นตรวจสอบว่าเป็นองค์ประกอบใด หากเป็น <h2> ก็จะถูกเลือก มิฉะนั้น องค์ประกอบจะไม่ถูกเลือก ตัวอย่างเช่น ให้พิจารณาโครงสร้างองค์ประกอบต่อไปนี้

บรรณาธิการ: Vlad Merzhevich

:nth-last-child(n+2)

พื้นหลัง: #f05347; /* พื้นหลังสีแดง */

:nth-last-child(2)

<p>ถ้าคุณรู้สึกง่วงเป็นวันที่สามติดต่อกัน -

ลองมาดูตัวอย่างกัน

จอแสดงผล: inline-block /* พอดีกับความกว้างของเนื้อหา */

ซ่อนย่อหน้าสุดท้าย

<section>
  <p>Второй абзац</p>

ตัวอย่างที่ 1: การใช้ :nth-last-of-type

<title>:nth-last-of-type()</title>

ตัวอย่างที่ 1 ใช้ :nth-last-of-type เพื่อซ่อนย่อหน้าสุดท้ายโดยตั้งค่าคุณสมบัติการแสดงผลเป็น none เมื่อปุ่ม <button> ได้รับการโฟกัส (เพียงคลิกที่ปุ่ม) ย่อหน้าทั้งหมดด้านล่างปุ่มจะมองเห็นได้ เมื่อปุ่มสูญเสียโฟกัส (คลิกที่ใดก็ได้นอกปุ่ม) ย่อหน้าจะถูกซ่อนอีกครั้ง

 

ปรับปรุงล่าสุด: 03/12/2020

ดังนั้นวันนี้คือวันพุธ</p>

:nth-last-child(1)
:nth-last-child(2n) или :nth-last-child(even)

ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่ หนึ่ง.

:nth-last-child(2n+1) или :nth-last-child(odd)

เลือกองค์ประกอบสุดท้าย

แสดง: ไม่มี; /* ซ่อนย่อหน้าสุดท้าย */
<h2>คำแนะนำชีวิต</h2>
สี: #fff; /* ข้อความสีขาว */
แสดง: บล็อก; /* แสดงย่อหน้า */

องค์ประกอบที่เท่ากันทั้งหมด เริ่มจากจุดสิ้นสุด :nth-last-child(even) จะเหมือนกับ :nth-child(even) เฉพาะในกรณีที่จำนวนองค์ประกอบทั้งหมดเป็นเลขคี่ (เช่น 5 ตัวอย่าง); ถ้าจำนวนองค์ประกอบทั้งหมดเป็นเลขคู่ (เช่น หก) ดังนั้น :nth-last-child(even) จะเหมือนกับ :nth-child(odd)

</section>

ปุ่ม: โฟกัส ~ p {


thoughts on “Css pseudo-classes - องค์ประกอบสุดท้าย-last

Leave a Reply

Your email address will not be published. Required fields are marked *