ป้ายกำกับ: Pseudo-class คือ

Lv.15 CSS Pseudo-class

Posted on by alsoon

CSS Pseudo-class เป็นการกำหนดสถานะพิเศษของอิลิเมนต์

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

Syntax

ชื่อ Selector:pseudo-class {
	Property1: Value;
	Property2: Value;
}

Anchor Pseudo-classes

เป็นการกำหนดสีของลิงค์ด้วยวิธีต่างๆ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-class Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			/* unvisited link */
			a:link {
				color: red;
			}

			/* visited link */
			a:visited {
				color: green;
			}

			/* mouse over link */
			a:hover {
				color: gold;
			}

			/* selected link */
			a:active {
				color: blue;
			}
			
		</style>
	</head>
	<body>
	
		<a href="#">อ่านต่อ...</a>
		
	</body>
</html>

CSS Hover

เมื่อวางเมาส์เหนืออิลิเมนต์จะเกิดเหตุการณ์ขึ้น

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-class Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a:hover {
				padding: 5px;
				font-size: 50px;
				color: red;
			}
			
			div:hover {
				padding: 20px;
				background-color: blue;
			}
			
		</style>

	</head>
	<body>
	
		<a href="#">อ่านต่อ...</a>
		
		<div>DIV</div>
		
	</body>
</html>

CSS :first-child Pseudo-class

:first-child จะเป็นการเลือกอิลิเมนต์ที่เป็นลำดับแรกสุดของ Parent element เท่านั้น

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-class Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p:first-child {
				color: red;
			}
		</style>
	</head>
	<body>
	
		<main>
			<article>
				<p>พารากราฟ 1</p>
				<p>พารากราฟ 2</p>
					<footer>
						<p>พารากราฟ 2.1</p>
						<p>พารากราฟ 2.2</p>
					</footer>
			</article>
		</main>
		<footer>
			<p>พารากราฟ 3</p>
			<p>พารากราฟ 4</p>
			<p>พารากราฟ 5</p>
		</footer>
		
	</body>
</html>

CSS :last-child Pseudo-class

:last-child จะเป็นการเลือกอิลิเมนต์ที่เป็นลำดับสุดท้ายของ Parent element เท่านั้น

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-class Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p:last-child {
				color: red;
			}
		</style>
	</head>
	<body>
	
		<main>
			<article>
				<p>พารากราฟ 1</p>
				<p>พารากราฟ 2</p>
					<footer>
						<p>พารากราฟ 2.1</p>
						<p>พารากราฟ 2.2</p>
					</footer>
			</article>
		</main>
		<footer>
			<p>พารากราฟ 3</p>
			<p>พารากราฟ 4</p>
			<p>พารากราฟ 5</p>
		</footer>
		
	</body>
</html>

CSS :first-of-type Pseudo-class

จะเป็นการเลือกอิลิเมนต์ที่เป็นลำดับแรกสุดของ Parent element เท่านั้น เหมือนกับ :first-child

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-class Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p:first-of-type {
				color: red;
			}
		</style>
	</head>
	<body>
	
		<main>
			<article>
				<p>พารากราฟ 1</p>
				<p>พารากราฟ 2</p>
					<footer>
						<p>พารากราฟ 2.1</p>
						<p>พารากราฟ 2.2</p>
					</footer>
			</article>
		</main>
		<footer>
			<p>พารากราฟ 3</p>
			<p>พารากราฟ 4</p>
			<p>พารากราฟ 5</p>
		</footer>
		
	</body>
</html>

CSS :last-of-type Pseudo-class

ใช้ตรงกันข้วมกับ :first-of-type แต่ไม่เหมือนกับ :last-child

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-class Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p:last-of-type {
				color: red;
			}
		</style>
	</head>
	<body>
	
		<main>
			<article>
				<p>พารากราฟ 1</p>
				<p>พารากราฟ 2</p>
					<footer>
						<p>พารากราฟ 2.1</p>
						<p>พารากราฟ 2.2</p>
					</footer>
			</article>
		</main>
		<footer>
			<p>พารากราฟ 3</p>
			<p>พารากราฟ 4</p>
			<p>พารากราฟ 5</p>
		</footer>
		
	</body>
</html>
Top