Pseudo class :first-child trong css

Chào các bạn
mình mới lọ mọ qua mảng web, mới học được html cơ bản css cơ bản, và css mình còn 1 phần về lớp ảo trong css pseudo class
m học đến :first-child : chọn thành phần đầu tiên trong 1 tag
m liệt kê ra được các kiểu như sau, nhưng khi thử khi có 1 số kiểu k chạy như mong muốn
có cái nào sai k nhỉ, xincamon

div :first-child{
	
}
div b:first-child{
	
}
div:first-child :first-child{
	
}
div:first-child b:first-child{
	
}
div:first-child b{
 	
}



#id :first-child{
	
}
#id b:first-child{
	
}
#id:first-child b{

}
#id:first-child b:first-child{

}
#id:first-child :first-child{

}




p#id :first-child{
	
}
p#id b:first-child{
	
}
p#id:first-child b{

}
p#id:first-child :first-child{
	
}
p#id:first-child b:first-child{
	
}


.class :first-child{
	
}
.class b:first-child{
	
}
.class:first-child :first-child{
	
}
.class:first-child b:first-child{
	
}
.class:first-child b{

}




u.class :first-child{
	
}
u.class:first-child :first-child{
	
}
u.class:first-child b:first-child{
	
}
u.class b:first-child{
	
}
u.class:first-child b{

}

help help help :slight_smile:

Ít nhất của đưa lênh codepen.io hoặc đưa cái hình + nêu ra không chạy mong muống chổ nào mới giúp được chứ. Chứ đưa CSS không bố ai giúp được.
HTML?

1 Like

cái này k cần code mà, nhìn vào định nghĩa pseudo-class ấy bạn, mình đang ý muốn hỏi cái nào định nghĩa sai, chứ k hỏi code chạy sai ở đâu

Mình chả thấy sai ở đâu cả

1 Like

code đây bạn
html

<!DOCTYPE html>
<html lang="vi">
<head>
	<link rel="stylesheet" type="text/css" href="./stylesheet/stylesheet08.css">
</head>
<body>
	<div>
		<h1>Van ban h1</h1>
		<h2>Van ban u</h2>
	</div>
	
	<h4>
		<b>Van ban b</b>
		<b>Van ban b</b>
	</h4>

	<p>
		<strike>Van ban gach chan</strike>
		<i>Van ban in nghieng</i>
	</p>

	<p>
		<strike>Van ban gach chan</strike>
		<i>Van ban in nghieng</i>
	</p>

</body>
</html>

css

div :first-child{
	background-color: #fd6378;
}

h4 b:first-child{
	color: #4797b1;
}

p:first-child :first-child{
	background-color: #f08a5d;
}

ở cái lớp ảo này , chọn thành phần đầu tiên trong thẻ p đầu tiên nó k chạy

p:first-child :first-child{

}

p:first-child :first-child cái này chọn đến tận 3 lớp đấy, p:first-child con của <p> rồi tiếp tục chọn con bênh trong lần nữa, mà trong đoạn HTML bạn không có đối tượng này

1 Like

ô thê đoạn này

s:first-child h1{
 
}

chọn tất cả các thẻ h1 trong thẻ s đầu tiền có phải không, :3 loạn loại kiêu gì

Chọn tất cả h1 trong thằng con (cưng) đầu tiên của s tag (chưa thấy tag này bao giờ)

1 Like

tag này m xem trên w3school đó

À tag HTML 5 mới, :v sau này toàn dùng Css để tạo dấu gạch thôi

1 Like

đây

nó cứ loạn loạn kiểu gì, đây bạn xem
html

<!DOCTYPE html>
<html lang="vi">
<head>
	<link rel="stylesheet" type="text/css" href="./stylesheet/stylesheet08.css">
</head>
<body>
	<div>
		<h1>Van ban h1</h1>
		<h2>Van ban u</h2>
	</div>
	
	<h4>
		<b>Van ban b</b>
		<b>Van ban b</b>
	</h4>

	<s>
		<h1>Van ban in nghieng</h1>
		<p>Van ban p</p>
		<h1>Van ban in nghieng</h1>
	</s>

	<s>
		<h1>Van ban in nghieng</h1>
		<p>Van ban p</p>
		<h1>Van ban in nghieng</h1>
	</s>



</body>
</html>

css

div :first-child{
	background-color: #fd6378;
}

h4 b:first-child{
	color: #4797b1;
}

s:first-child h1{
 	background-color: yellow;
}

đoạn này chọn các thẻ h1 trong thẻ s nhưng với đk là thẻ s đầu tiên

s:first-child h1{
 
}

nhưng như trên file html mình để thẻ s trước div thì chạy còn đề sau thì lại chạy :V

Xin lỗi cái này mình sai, s:first-child có nghĩa là <s> phải là thằng con đầu tiên của lớp mẹ

1 Like
p:first-child :first-child{
	
}

cái này là chọn thành phần đầu tiên của thẻ p nhưng với đk là thẻ p đầu tiên,
trong file html m có

<p>
		<strike>Van ban gach chan</strike>
		<i>Van ban in nghieng</i>
	</p>

	<p>
		<strike>Van ban gach chan</strike>
		<i>Van ban in nghieng</i>
	</p>

nó phải chọn được ra thẻ strike mới đúng, có nhiều kiểu trong số mình liệt kê k chạy như ý muốn hoặc chạy nhưng kiểu đặt nơi này thì chạy, nơi khác thì không

Học kỹ quá cũng ko tốt đâu bạn, cứ học lướt nhanh rồi làm dự án cụ thể đi :slight_smile:

1 Like

Thì đúng rồi, nó yêu cấu phải là “con đầu tiên của lớp mẹ” nên chỉ để ở đầu được thôi, để mình lấy ví dụ cái codepen cho

1 Like

mình không theo web, m theo c/c++ và java, nhưng muốn có 1 cái blog cá nhân viết linh tinh, nên mới lọ mọ sang web, :smile: m k muốn dùng framework tạo web có sẵn, hay dùng pts sinh mã front-end tự động hay kéo thả sinh mã tự động, vì blog m định viết cũng đơn giản, k có hiệu ứng gì nhiểu, nên muốn tự học rồi code tay :v hơi thủ công, nhưng học được nhiều

nghĩa là cái nào mà là kiểu
:frist-child để trước
thì phải luôn để ở đầu
còn :first-child để sau thì có thể đề ở bất cứ vị trí nào hả bạn
thế h m có yêu cầu như sau

chọn ra các thẻ h1 trong thẻ b với điều kiền là thẻ b đầu tiền
và chọn ra các thẻ u trong thẻ i vơi điều kiện thẻ i đầu tiện
vậy là 2 yêu cầu này k thể làm cùng lúc vì thành phần :first-child để trước thì chỉ có 1 đứa được đứng đầu

https://codepen.io/tranlehaiquan/pen/RZBNgN

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?