Merhabalar, bu yazımda Pseudo Class selector’e bakacağız.
Pseudo özel seçicilerdir. Örneklerle beraber daha anlaşılır olacaktır.
Pseudo Element kullanımında :: iki tane iki nokta üst üste ile seçim yapıyorduk.
Eğer Pseudo Class kullanırsak bu seçim : tek iki nokta üst üste ile yapabiliriz.
Pseudo Class Selector’ler aşağıdaki gibidir.
| Selector | Example | Example description |
|---|---|---|
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Selects the <input> element that has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with “it” |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Selects all unvisited links |
| :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 |
| :read-only | input:read-only | Selects <input> elements with a “readonly” attribute specified |
| :read-write | input:read-write | Selects <input> elements with no “readonly” attribute |
| :required | input:required | Selects <input> elements with a “required” attribute specified |
| :root | root | Selects the document’s root element |
| :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 |
| :visited | a:visited | Selects all visited links |
Örneğin sayfamıza iki tane daha p etiketi ekleyelim ama farklı iki Class değeri verelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>Pseudo Selector</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto reiciendis accusantium quaerat! Nobis a corporis iusto sequi doloribus excepturi nostrum illum, eius voluptate asperiores voluptatum repellendus. Numquam soluta fugit ut sequi et sapiente veritatis distinctio sunt reiciendis facere magnam totam est quod consequuntur itaque nesciunt possimus, velit earum unde veniam eum delectus consectetur. Totam iste eius ea error architecto veritatis, eos at laboriosam commodi enim harum tempora delectus eveniet repellendus consequatur! Sed illo ex itaque qui, eaque sunt tenetur necessitatibus libero inventore sint odio reprehenderit sit, cupiditate tempora. Sit cumque, eaque culpa nemo fugiat delectus officia itaque laboriosam. Modi placeat sit dolore veritatis sunt perspiciatis debitis optio pariatur nemo ullam? Perspiciatis amet natus culpa aperiam in eveniet quis rerum, aut dolore aliquam maxime nihil doloremque omnis facilis sapiente ut. Aut accusamus minus possimus ex esse explicabo, laudantium blanditiis in! Quasi reprehenderit aut a velit voluptate ratione consequatur. Maxime minus perferendis saepe eius rem? Saepe non eum cumque, mollitia eaque consectetur modi adipisci porro neque. </p>
<p class="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iste iusto debitis, distinctio voluptas quos quisquam culpa eveniet dolores dolore dignissimos quas porro consectetur deserunt in quod explicabo commodi placeat veniam voluptate eum qui ipsam. Dignissimos consectetur cumque nisi magni?</p>
<p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iste iusto debitis, distinctio voluptas quos quisquam culpa eveniet dolores dolore dignissimos quas porro consectetur deserunt in quod explicabo commodi placeat veniam voluptate eum qui ipsam. Dignissimos consectetur cumque nisi magni?</p>
</body>
</html>Şimdi p etiketine ait Class’ı first olanın ilk harfini seçip CSS uygulayalım.
p.first:first-letter{
font-size: 40px;
}
p.second:first-letter{
font-size: 30px;
}Bir liste oluşturalım.
<ul class="todo">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>Öncelikle bu ul etiketinin Class’ı todo olanın altındaki li etiketlerine CSS uygulamak istiyorum.
ul.todo li{
padding: 10px;
margin: 10px;
font-size: 20px;
color:darkmagenta;
}Bu listedeki ilk elemanı seçip CSS uygulayalım.
ul.todo li:first-child{
background-color:darkorchid;
text-decoration: line-through;
}Listenin son elemanını seçip CSS uygulayalım.
ul.todo li:last-child{
background-color:darkorchid;
text-decoration: line-through;
}Sayma sırası olarak tek ve çift elemanları seçip CSS uygulayabiliriz. even çift elemanlara, odd tek elemanlara ulaştırır.
ul.todo li:nth-of-type(even){
background-color:darkorchid;
text-decoration: line-through;
}
ul.todo li:nth-of-type(odd){
background-color:darkorchid;
text-decoration: line-through;
}Yeni özelliklerimize göz atalım.
:link = Bu var olan linkin ilk halini ifade eder.
:hover = linkin üzerine gelindiğinde uygulanacak cssdir.
:activate = link tıklandığı anda uygulanacak cssdir.
:visited = link ziyaret edildikten sonra uygulanacak cssdir.
<a href="www.google.com">Google</a>a{
display: block;
border: darkorchid 2px solid;
text-decoration: none;
padding: 20px;
}
a:link{
font-size: 30px;
color: red;
}
a:hover{
font-size: 45px;
background-color: darkorchid;
color: wheat;
}
a:active{
font-size: 45px;
background-color: darkorchid;
color: yellow;
}
a:visited{
font-size: 30px;
background-color:yellow;
color: black;
}hover farklı etiketlerle de kullanılır.
Bir sonraki yazımda görüşmek üzere.
Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…