FrontEnd Developer RoadMap - CSS3 Tutorial 20 Pseudo Class Selector

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.