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>
*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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
:root
<!DOCTYPE html>
<html>
<head>
<style>
:root {
background: #ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
: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>
: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="support@exampel.com">
<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>
: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>
Semoga bermanfaat.
Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency