Belajar CSS (20. Peseudo-classes)

Belajar CSS (20. Peseudo-classes)

Peseudo classes digunakan untuk mendefinisikan suatu unsur tertentu.

Syntax

selector:peseudo-classes{
	property:value;
}

Macam-macam peseudo-classes
:active
:checked
:disabled
:empity
:enable
:firt-child
:first-of-type
:focus
:hover
:in-range
:invalid
:lang(language)
:last-child
:last-of-type
:link
:not-selector
:nth-child(n)
:nth-last-child(n)
:nth-last-of-type(n)
:nth-of-type(n)
:only-child
:optional
:out-of-type
:read-only
:read-write
:required
:root
:target
:valid
:visited

contoh kode penerapan
:active

<!DOCTYPE html>
<html>
<head>
<style>
a:active {
    background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<p><b>Note:</b> The :active selector styles the active link.</p>
</body>
</html>

hasil
*tekan link jangan dilepas dulu

:checked

<!DOCTYPE html>
<html>
<head>
	<title>checked</title>
	<style>
		input:checked{
			height: 50px;
			width: 50px;
		}
	</style>
</head>
<body>
	<form action="">
		<input type="radio" checked="checked" value="laki-laki" name="kelamin">male<br>
		<input type="radio" value="perempuan" name="kelamin">female<br>
		<input type="checkbox" checked="checked" value="laptop"> i have laptop<br>
		<input type="checkbox" value="computer"> I have computer		
	</form>	
</body>
</html>

hasil

:disabled

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text]:enabled {
    background: #ffff00;
}

input[type=text]:disabled {
    background: #dddddd;
}
</style>
</head>
<body>

<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

</body>
</html>

hasil

:empity

<!DOCTYPE html>
<html>
<head>
<style> 
p:empty {
    width: 100px;
    height: 20px;
    background: #ff0000;
}
</style>
</head>
<body>

<p></p>
<p>A paragraph.</p>
<p>Another paragraph.</p>

</body>
</html>

hasil

:enable

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text]:enabled {
    background: #ffff00;
}

input[type=text]:disabled {
    background: #dddddd;
}
</style>
</head>
<body>

<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

</body>
</html>

hasil

:firt-child

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
    background-color: yellow;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent (body).</p>

<h1>Welcome to My Homepage</h1>
<p>This paragraph is not the first child of its parent.</p>

<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
</div>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>

hasil

:first-of-type

<!DOCTYPE html>
<html>
<head>
<style> 
p:first-of-type {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

hasil

:focus

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
    background-color: yellow;
}
</style>
</head>
<body>

<p>Click inside the text fields to see a yellow background:</p>

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<p><b>Note:</b> For :focus to work in IE8, a DOCTYPE must be declared.</p>

</body>
</html>

hasil

:hover

<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
    background-color: yellow;
}
</style>
</head>
<body>

<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

</body>
</html>

hasil

:in-range

<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
    border: 2px solid red;
}
</style>
</head>
<body>

<h3>A demonstration of the :in-range selector.</h3>

<input type="number" min="5" max="10" value="7">

<p>Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.</p>

<p><strong>Note</strong>: The :in-range selector is not supported in Internet Explorer.</p>

</body>
</html>

hasil

:invalid

<!DOCTYPE html>
<html>
<head>
<style>
input:invalid {
    border: 2px solid red;
}
</style>
</head>
<body>

<h3>A demonstration of the :invalid selector.</h3>

<input type="email" value="supportEmail">

<p>Try typing a legal e-mail address, to see the styling disappear.</p>

<p><strong>Note</strong>: The :invalid selector is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

hasil

:lang(language)

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(id) { 
    background: yellow;
}
</style>
</head>
<body>

<p>I live in Indonesia</p>
<p lang="id">Apa kabar</p>

<p><b>Note:</b> For :lang to work in IE8, a DOCTYPE must be declared.</p>

</body>
</html>

hasil

:last-child

<!DOCTYPE html>
<html>
<head>
<style> 
p:last-child {
    background: #ff0000;
}
</style>
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

hasil

:last-of-type

<!DOCTYPE html>
<html>
<head>
<style> 
p:last-of-type {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

hasil

:link

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    background-color: yellow;
}
</style>
</head>
<body>

<a href="http://www.w3schools.com">W3Sschools</a>
<a href="http://www.wikipedia.org">Wikipedia</a>

<p><b>Note:</b> The :link selector style links to pages you have not visited yet.</p>

</body>
</html>

hasil

:not-selector

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: #000000;
}

:not(p) {
    color: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

<a href="http://www.w3schools.com" target="_blank">Link to W3Schools!</a>

</body>
</html>

hasil

:nth-child(n)

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(3) {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

</body>
</html>

hasil

:nth-last-child(n)

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-last-child(1) {
    background: #ff0000;
} 
</style>
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-last-child() selector.</p>

</body>
</html>

hasil

:nth-last-of-type(n)

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-last-of-type(2) {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-last-of-type() selector.</p>

</body>
</html>

hasil

:nth-of-type(n)

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(2) {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

hasil

:only-of-type:

<!DOCTYPE html>
<html>
<head>
<style> 
p:only-of-type {
    background: #ff0000;
}
</style>
</head>
<body>

<div><p>This is a paragraph.</p></div>

<div><p>This is a paragraph.</p><p>This is a paragraph.</p></div>

</body>
</html>

hasil

:only-child

<!DOCTYPE html>
<html>
<head>
<style> 
p:only-child {
    background: #ff0000;
}
</style>
</head>
<body>

<div><p>This is a paragraph.</p></div>

<div><span>This is a span.</span><p>This is a paragraph.</p></div>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :only-child selector.</p>

</body>
</html>

hasil

:optional

<!DOCTYPE html>
<html>
<head>
<style>
input:optional {
    background-color: yellow;
}
</style>
</head>
<body>

<h3>A demonstration of the :optional selector.</h3>

<p>An optional input element:<br><input></p>

<p>A required input element:<br><input required></p>

<p>The :optional selector selects form elements with no "required" attribute.</p>

<p><strong>Note:</strong> The :optional selector is not supported in Internet Explorer 9 or earlier versions.</p>

</body>
</html>

hasil

:out-of-range

<!DOCTYPE html>
<html>
<head>
<style>
input:out-of-range {
    border: 2px solid red;
}
</style>
</head>
<body>

<h3>A demonstration of the :out-of-range selector.</h3>

<input type="number" min="5" max="10" value="17">

<p>Try typing a number within the given range (between 5 and 10), to see the styling disappear.</p>

<p><strong>Note</strong>: The :out-of-range selector is not supported in Internet Explorer.</p>

</body>
</html>

hasil

:read-only

<!DOCTYPE html>
<html>
<head>
<style>
input:-moz-read-only { /* For Firefox */
    background-color: yellow;
}

input:read-only {
    background-color: yellow;
}
</style>
</head>
<body>

<h3>A demonstration of the :read-only selector.</h3>

<p>A normal input element:<br><input value="hello"></p>

<p>A readonly input element:<br><input readonly value="hello"></p>

<p>The :read-only selector selects form elements with a "readonly" attribute.</p>

<p><strong>Note:</strong> The :read-only selector is not supported in Internet Explorer.</p>

<p><strong>Note:</strong> Firefox supports an alternative, the :-moz-read-only property.</p>

</body>
</html>

hasil

:read-write

<!DOCTYPE html>
<html>
<head>
<style>
input:-moz-read-write { /* For Firefox */
    background-color: yellow;
}

input:read-write {
    background-color: yellow;
}
</style>
</head>
<body>

<h3>A demonstration of the :read-write selector.</h3>

<p>A normal input element:<br><input value="hello"></p>

<p>A readonly input element:<br><input readonly value="hello"></p>

<p>The :read-write selector selects form elements with no "readonly" attribute.</p>

<p><strong>Note:</strong> The :read-write selector is not supported in Internet Explorer.</p>

<p><strong>Note:</strong> Firefox supports an alternative, the :-moz-read-write property.</p>

</body>
</html>

hasil

:required

<!DOCTYPE html>
<html>
<head>
<style>
input:required {
    background-color: yellow;
}
</style>
</head>
<body>

<h3>A demonstration of the :required selector.</h3>

<p>An optional input element:<br><input></p>

<p>A required input element:<br><input required></p>

<p>The :required selector selects form elements with a "required" attribute.</p>

<p>The :required selector is not supported in Internet Explorer 9 or earlier versions.</p>

</body>
</html>

hasil

:root

<!DOCTYPE html>
<html>
<head>
<style> 
:root {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

</body>
</html>

hasil

:target

<!DOCTYPE html>
<html>
<head>
<style>
:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

</body>
</html>

hasil

:valid

<!DOCTYPE html>
<html>
<head>
<style>
input:valid {
    background-color: yellow;
}
</style>
</head>
<body>

<h3>A demonstration of the :valid selector.</h3>

<input type="email" value="[email protected]">

<p>Try typing an illegal e-mail address, to see the styling disappear.</p>

<p><strong>Note</strong>: The :valid selector is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

hasil

:visited

<!DOCTYPE html>
<html>
<head>
<style>
a:visited {
    color: pink;
}
</style>
</head>
<body>

<a href="http://www.w3schools.com">W3Sschools Home</a><br>
<a href="http://www.w3schools.com/html/">W3Schools HTML Tutorial</a><br>
<a href="http://www.w3schools.com/css/">W3Schools CSS Tutorial</a>

<p><b>Note:</b> The :visited selector style links to pages you have already visited.</p>

</body>
</html>

hasil

Semoga bermanfaat.

Leave a Reply

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