CSS Pseudo Classes

/* 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;
}



Örnek 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.

---

İd ve Claslara Pseudo komutları uygulanabilir.
<style>

.ozelClass:link {
  color: red;
}

.ozelClass:visited {
  color: green;
}


.ozelClass:hover {
  color: hotpink;
}


.ozelClass:active {
  color: blue;
}
</style>


<p><b><a href="#" target="_blank">Örnek Link</a></b></p>
<p><b><a href="#" target="_blank" clas="ozelClass">Özel Class</a></b></p>


Örnek Link
Özel Class


<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

#divkarismasin:hover p {
  display: block;
}
</style>


<div id="divkarismasin">Hover over me to show the p element
  <p>Tada! Here I am!</p>
</div>

Pragraf Üzerine Gel
Tada! Here I am!

---

input:focus

<style>
input:focus {
  background-color: red;
}
</style>


<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>
Click inside the text fields to see a yellow background:

First name:
Last name:

---

first-child 
<style>
p:first-child {
  color: blue;
}
</style>


<p>This is some text.</p>
<p>This is some text.</p>

 

---

input:invalid {
  border: 2px solid red;

Geçersiz Mail :invalid selector.

---

:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no "required" attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
::placeholder	input::placeholder	Selects input elements with placeholder text
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	Selects the document's root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value