FrontEnd Developer Road Map

FrontEnd Developer RoadMap – CSS3 Tutorial 8 Tüm Seçici Yöntemler

Merhabalar, bu yazımda ana CSS geliştirmelerine geçmeden önce tüm CSS Selector(Seçici) yöntemlerini bir liste halinde sizlerle paylaşmak istedim.

Bundan sonraki bölümlerde yavaş yavaş bunları uyguluyor olacağız.

Ne demiştik Html içinde CSS uygulamak istediğimiz her ne varsa bunu CSS kodlarını yazdığımız yerde belirtmemiz gerekiyordu.

İşte bunu yapmanın çok fazla yöntemi ve oluşabilecek durumları karşılayan seçicileri var. Selector diyoruz aynı zamanda.

Bu listeden istediğimizi türetebiliriz. Bunların hepsini ezbere bilmeye gerek yoktur.

SelectorExampleExample description
.class.introSelects all elements with class=”intro”
.class1.class2.name1.name2Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2.name1 .name2Selects all elements with name2 that is a descendant of an element with name1
#id#firstnameSelects the element with id=”firstname”
**Selects all elements
elementpSelects all <p> elements
element.classp.introSelects all <p> elements with class=”intro”
element,elementdiv, pSelects all <div> elements and all <p> elements
element elementdiv pSelects all <p> elements inside <div> elements
element>elementdiv > pSelects all <p> elements where the parent is a <div> element
element+elementdiv + pSelects the first <p> element that is placed immediately after <div> elements
element1~element2p ~ ulSelects every <ul> element that is preceded by a <p> element
[attribute][target]Selects all elements with a target attribute
[attribute=value][target=_blank]Selects all elements with target=”_blank”
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word “flower”
[attribute|=value][lang|=en]Selects all elements with a lang attribute value equal to “en” or starting with “en-“
[attribute^=value]a[href^=”https”]Selects every <a> element whose href attribute value begins with “https”
[attribute$=value]a[href$=”.pdf”]Selects every <a> element whose href attribute value ends with “.pdf”
[attribute*=value]a[href*=”w3schools”]Selects every <a> element whose href attribute value contains the substring “w3schools”
:activea:activeSelects the active link
::afterp::afterInsert something after the content of each <p> element
::beforep::beforeInsert something before the content of each <p> element
:checkedinput:checkedSelects every checked <input> element
:defaultinput:defaultSelects the default <input> element
:disabledinput:disabledSelects every disabled <input> element
:emptyp:emptySelects every <p> element that has no children (including text nodes)
:enabledinput:enabledSelects every enabled <input> element
:first-childp:first-childSelects every <p> element that is the first child of its parent
::first-letterp::first-letterSelects the first letter of every <p> element
::first-linep::first-lineSelects the first line of every <p> element
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
:focusinput:focusSelects the input element which has focus
:fullscreen:fullscreenSelects the element that is in full-screen mode
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects input elements with a value within a specified range
:indeterminateinput:indeterminateSelects input elements that are in an indeterminate state
:invalidinput:invalidSelects all input elements with an invalid value
:lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to “it” (Italian)
:last-childp:last-childSelects every <p> element 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
::marker::markerSelects the markers of list items
: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
::placeholderinput::placeholderSelects input elements with the “placeholder” attribute specified
:read-onlyinput:read-onlySelects input elements with the “readonly” attribute specified
:read-writeinput:read-writeSelects input elements with the “readonly” attribute NOT specified
:requiredinput:requiredSelects input elements with the “required” attribute specified
:root:rootSelects the document’s root element
::selection::selectionSelects the portion of an element that is selected by a user
: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

Bir sonraki yazımda görüşmek üzere.

Kaynak : https://www.w3schools.com/cssref/css_selectors.asp

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 10 – Oly’nin PCR Sonucu Çıktı FCov Pozitif…

Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…

14 saat ago

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

5 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

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.…

5 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

5 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

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…

6 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

7 gün ago