Khmer Web: CSS Pseudo-class

Pseudo-class ត្រូវប្រើប្រាស់សំរាប់កំណត់សភាពលក្ខណៈរបស់ element ទាំងឡាយ ស្ថិតនៅក្នុងស្ថានភាពណាមួយ មានដូចជាស្ថិតស្ថានភាពដែល mouse ស្ថិតនៅពីលើ ស្ថានភាពរបស់ link នៅពេលត្រូវចុច និងស្ថានភាពនៅពេលដែល element focus ជាដើម។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Pseudo-class</title>
    <style>
      /* unvisited link */
	  a:link {
  		color: red;
	  }

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

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

	  /* selected link */
	  a:active {
  		color: blue;
	  }
    </style>
  </head>
  
  <body>
	This is a link
	Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
	Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
  </body>
</html>

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

យើងអាចប្រើប្រាស់ pseudo-class ក្នុងការបង្កើត tooltip បាន ដោយធ្វើដូចខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Pseudo-class</title>
    <style>
      p {
  		display: none;
  		background-color: yellow;
  		padding: 20px;
	  }

	  div:hover p {
  		display: block;
	  }
    </style>
  </head>
  
  <body>
	Hover over me to show the p element
  	  Tada! Here I am!
	
  </body>
</html>

Hover over me to show the p element

Tada! Here I am!

:first-child ត្រូវគេយកទៅប្រើប្រាស់សំរាប់ជ្រើសរើសយកelement ណាមួយដែលជា first child នៃ element ណាមួយ។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Pseudo-class</title>
    <style>
      p:first-child {
  		color: blue;
	  } 
    </style>
  </head>
  
  <body>
	This is some text.
	This is some text.
	Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.
  </body>
</html>

This is some text.

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.