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.

SelectorExampleExample description
:activea:activeSelects the active link
:checkedinput:checkedSelects every checked <input> element
:disabledinput:disabledSelects every disabled <input> element
:emptyp:emptySelects every <p> element that has no children
:enabledinput:enabledSelects every enabled <input> element
:first-childp:first-childSelects every <p> elements that is the first child of its parent
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
:focusinput:focusSelects the <input> element that has focus
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects <input> elements with a value within a specified range
:invalidinput:invalidSelects 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-childp:last-childSelects every <p> elements that is the last child of its parent
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent
:linka:linkSelects 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-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent
:only-childp:only-childSelects every <p> element that is the only child of its parent
:optionalinput:optionalSelects <input> elements with no “required” attribute
:out-of-rangeinput:out-of-rangeSelects <input> elements with a value outside a specified range
:read-onlyinput:read-onlySelects <input> elements with a “readonly” attribute specified
:read-writeinput:read-writeSelects <input> elements with no “readonly” attribute
:requiredinput:requiredSelects <input> elements with a “required” attribute specified
:rootrootSelects the document’s root element
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all <input> elements with a valid value
:visiteda:visitedSelects 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.

Exit mobile version