{"id":38440,"date":"2026-01-31T11:00:37","date_gmt":"2026-01-31T08:00:37","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/"},"modified":"2026-01-31T11:00:37","modified_gmt":"2026-01-31T08:00:37","slug":"css-seciciler-101-ogeleri-hassasiyetle-hedefleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/","title":{"rendered":"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme"},"content":{"rendered":"<h2>CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme<\/h2>\n<p>Web sayfalar\u0131n\u0131z\u0131 tasarlarken, HTML belgelerinizdeki belirli \u00f6\u011felere stil uygulamak, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. \u0130\u015fte tam bu noktada CSS se\u00e7iciler devreye girer. CSS se\u00e7iciler, stil kurallar\u0131n\u0131z\u0131n hangi HTML \u00f6\u011felerini hedefleyece\u011fini belirlemenizi sa\u011flayan g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Bu makalede, en temelden en geli\u015fmi\u015fe kadar farkl\u0131 CSS se\u00e7ici t\u00fcrlerini, nas\u0131l \u00e7al\u0131\u015ft\u0131klar\u0131n\u0131 ve web sayfalar\u0131n\u0131zda \u00f6\u011feleri hassasiyetle hedeflemek i\u00e7in nas\u0131l kullanabilece\u011finizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bu rehber sayesinde, CSS stil kurallar\u0131n\u0131z\u0131 \u00e7ok daha etkin ve kontrol edilebilir bir \u015fekilde yazabileceksiniz.<\/p>\n<h3>Temel Se\u00e7iciler: Ba\u015flang\u0131\u00e7 Noktas\u0131<\/h3>\n<p>CSS se\u00e7icilerin d\u00fcnyas\u0131na ad\u0131m atarken, en s\u0131k kullan\u0131lan ve anla\u015f\u0131lmas\u0131 en kolay olan temel se\u00e7icilerle ba\u015flamak en do\u011frusudur. Bu se\u00e7iciler, HTML yap\u0131s\u0131ndaki \u00f6\u011feleri do\u011frudan adlar\u0131, s\u0131n\u0131flar\u0131 veya benzersiz kimlikleri \u00fczerinden hedeflemenizi sa\u011flar.<\/p>\n<h4>Evrensel Se\u00e7ici (<code>*<\/code>)<\/h4>\n<p>Evrensel se\u00e7ici, bir HTML belgesindeki t\u00fcm \u00f6\u011feleri se\u00e7mek i\u00e7in kullan\u0131l\u0131r. Genellikle genel stil s\u0131f\u0131rlamalar\u0131 veya t\u00fcm \u00f6\u011felere uygulanacak varsay\u0131lan stiller i\u00e7in tercih edilir.<\/p>\n<pre><code>* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnek, t\u00fcm \u00f6\u011felerin d\u0131\u015f ve i\u00e7 bo\u015fluklar\u0131n\u0131 s\u0131f\u0131rlar ve kutu modelini <code>border-box<\/code> olarak ayarlar. Ancak, performans a\u00e7\u0131s\u0131ndan \u00e7ok geni\u015f kapsaml\u0131 oldu\u011fu i\u00e7in dikkatli kullan\u0131lmal\u0131d\u0131r.<\/p>\n<h4>Tip Se\u00e7ici (Element Se\u00e7ici)<\/h4>\n<p>Tip se\u00e7ici, belirli bir HTML \u00f6\u011fe t\u00fcr\u00fcn\u00fc (etiket ad\u0131n\u0131) hedeflemek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, t\u00fcm paragraflar\u0131 veya t\u00fcm ba\u015fl\u0131klar\u0131 se\u00e7ebilirsiniz.<\/p>\n<pre><code>p {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n}\n\nh2 {\n    color: #333;\n    border-bottom: 1px solid #eee;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, t\u00fcm <code><\/p>\n<p><\/code> etiketleri belirli bir yaz\u0131 tipi ve sat\u0131r y\u00fcksekli\u011fine sahip olurken, t\u00fcm <code><\/p>\n<h2><\/code> etiketleri koyu gri renk ve alt \u00e7izgi ile stilize edilmi\u015ftir.<\/p>\n<h4>S\u0131n\u0131f Se\u00e7ici (<code>.class<\/code>)<\/h4>\n<p>S\u0131n\u0131f se\u00e7ici, HTML \u00f6\u011felerine atanan <code>class<\/code> niteli\u011fi arac\u0131l\u0131\u011f\u0131yla \u00f6\u011feleri hedeflemenin en yayg\u0131n ve esnek yollar\u0131ndan biridir. Bir s\u0131n\u0131f ad\u0131 birden fazla \u00f6\u011feye atanabilir, bu da ayn\u0131 stili birden fazla \u00f6\u011feye uygulaman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code>.button {\n    background-color: #007bff;\n    color: white;\n    padding: 10px 15px;\n    border-radius: 5px;\n    text-decoration: none;\n}\n\n.highlight {\n    background-color: yellow;\n    font-weight: bold;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>HTML'de kullan\u0131m:<\/p>\n<pre><code><a href=\"#\" class=\"button\">Daha Fazla Bilgi<\/a>\n<p class=\"highlight\">Bu metin vurgulanm\u0131\u015ft\u0131r.<\/p>\n<\/pre>\n<p><\/code><\/p>\n<p>Bir \u00f6\u011feye birden fazla s\u0131n\u0131f da atayabilirsiniz: <code><button class=\"button primary\"><\/code><\/p>\n<h4>ID Se\u00e7ici (<code>#id<\/code>)<\/h4>\n<p>ID se\u00e7ici, HTML belgesindeki benzersiz bir \u00f6\u011feyi hedeflemek i\u00e7in kullan\u0131l\u0131r. Bir ID, bir sayfada yaln\u0131zca bir kez kullan\u0131lmal\u0131d\u0131r. Bu nedenle, belirli bir \u00f6\u011feye \u00f6zel stil uygulamak i\u00e7in idealdir.<\/p>\n<pre><code>#header {\n    background-color: #f8f9fa;\n    padding: 20px;\n    text-align: center;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>HTML'de kullan\u0131m:<\/p>\n<pre><code><div id=\"header\">\n    <h2>Web Siteme Ho\u015f Geldiniz<\/h2>\n<\/div>\n<\/pre>\n<p><\/code><\/p>\n<p>ID se\u00e7iciler, \u00f6zg\u00fcll\u00fck (specificity) a\u00e7\u0131s\u0131ndan s\u0131n\u0131f se\u00e7icilerden daha y\u00fcksek bir de\u011fere sahiptir, bu da onlar\u0131n stillerinin di\u011fer se\u00e7icilere g\u00f6re daha \u00f6ncelikli oldu\u011fu anlam\u0131na gelir.<\/p>\n<h3>Kombinat\u00f6r Se\u00e7iciler: \u0130li\u015fkileri Kullanma<\/h3>\n<p>Kombinat\u00f6r se\u00e7iciler, HTML \u00f6\u011feleri aras\u0131ndaki ili\u015fkileri (ebeveyn-\u00e7ocuk, karde\u015f vb.) kullanarak \u00f6\u011feleri hedeflemenizi sa\u011flar. Bu, daha karma\u015f\u0131k ve ba\u011flama duyarl\u0131 stiller olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n<h4>Torun Se\u00e7ici (Descendant Selector - Bo\u015fluk)<\/h4>\n<p>Torun se\u00e7ici, bir \u00f6\u011fenin i\u00e7inde bulunan herhangi bir torun \u00f6\u011feyi (do\u011frudan \u00e7ocuk olmak zorunda de\u011fil) se\u00e7mek i\u00e7in kullan\u0131l\u0131r. Se\u00e7iciler aras\u0131na bo\u015fluk b\u0131rak\u0131larak belirtilir.<\/p>\n<pre><code>nav a {\n    color: #007bff;\n    text-decoration: none;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kural, bir <code><\/p>\n<nav><\/code> \u00f6\u011fesinin i\u00e7indeki t\u00fcm <code><a><\/code> (link) \u00f6\u011felerini hedefler, bu linkler <code><\/p>\n<nav><\/code>'in do\u011frudan \u00e7ocu\u011fu olmasa bile.<\/p>\n<h4>\u00c7ocuk Se\u00e7ici (Child Selector - <code>><\/code>)<\/h4>\n<p>\u00c7ocuk se\u00e7ici, yaln\u0131zca belirli bir \u00f6\u011fenin do\u011frudan \u00e7ocuklar\u0131 olan \u00f6\u011feleri se\u00e7er. Bo\u015fluk se\u00e7iciden daha spesifiktir.<\/p>\n<pre><code>ul > li {\n    list-style-type: square;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnek, yaln\u0131zca <code><\/p>\n<ul><\/code> \u00f6\u011fesinin do\u011frudan \u00e7ocuklar\u0131 olan <code><\/p>\n<li><\/code> \u00f6\u011felerine kare madde i\u015fareti uygular. \u0130\u00e7 i\u00e7e ge\u00e7mi\u015f <code>\n<ul><\/code>'lerin <code><\/p>\n<li><\/code>'leri etkilenmez.<\/p>\n<h4>Biti\u015fik Karde\u015f Se\u00e7ici (Adjacent Sibling Selector - <code>+<\/code>)<\/h4>\n<p>Biti\u015fik karde\u015f se\u00e7ici, ayn\u0131 ebeveyne sahip olan ve belirtilen \u00f6\u011feden hemen sonra gelen \u00f6\u011feyi se\u00e7er.<\/p>\n<pre><code>h2 + p {\n    margin-top: 0;\n    font-style: italic;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kural, bir <code><\/p>\n<h2><\/code> \u00f6\u011fesinden hemen sonra gelen <code><\/p>\n<p><\/code> \u00f6\u011fesine stil uygular. Yaln\u0131zca bir sonraki karde\u015f \u00f6\u011feyi etkiler.<\/p>\n<h4>Genel Karde\u015f Se\u00e7ici (General Sibling Selector - <code>~<\/code>)<\/h4>\n<p>Genel karde\u015f se\u00e7ici, ayn\u0131 ebeveyne sahip olan ve belirtilen \u00f6\u011feden sonra gelen t\u00fcm karde\u015f \u00f6\u011feleri se\u00e7er.<\/p>\n<pre><code>h2 ~ p {\n    color: #555;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnek, bir <code><\/p>\n<h2><\/code> \u00f6\u011fesinden sonra gelen t\u00fcm <code><\/p>\n<p><\/code> karde\u015f \u00f6\u011felerine koyu gri renk verir. Biti\u015fik karde\u015f se\u00e7iciden farkl\u0131 olarak, aradaki di\u011fer \u00f6\u011felerden ba\u011f\u0131ms\u0131z olarak t\u00fcm sonraki karde\u015fleri etkiler.<\/p>\n<h3>S\u00f6zde S\u0131n\u0131f Se\u00e7iciler: Duruma G\u00f6re Hedefleme<\/h3>\n<p>S\u00f6zde s\u0131n\u0131flar, bir \u00f6\u011fenin belirli bir durumunu veya konumunu hedeflemenizi sa\u011flar. Bu, kullan\u0131c\u0131 etkile\u015fimlerine veya belgedeki yap\u0131sal konuma g\u00f6re stil uygulaman\u0131z i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r.<\/p>\n<h4>Dinamik S\u00f6zde S\u0131n\u0131flar<\/h4>\n<p>Kullan\u0131c\u0131 etkile\u015fimlerine yan\u0131t veren s\u0131n\u0131flard\u0131r:<\/p>\n<ul>\n<li><code>:hover<\/code>: Fare imleci \u00f6\u011fenin \u00fczerindeyken.<\/li>\n<li><code>:active<\/code>: \u00d6\u011feye t\u0131klan\u0131rken veya bas\u0131l\u0131rken.<\/li>\n<li><code>:focus<\/code>: \u00d6\u011feye odaklan\u0131ld\u0131\u011f\u0131nda (genellikle form elemanlar\u0131 ve linkler i\u00e7in).<\/li>\n<li><code>:link<\/code>: Ziyaret edilmemi\u015f ba\u011flant\u0131lar.<\/li>\n<li><code>:visited<\/code>: Ziyaret edilmi\u015f ba\u011flant\u0131lar.<\/li>\n<\/ul>\n<pre><code>a:hover {\n    color: #0056b3;\n    text-decoration: underline;\n}\n\ninput:focus {\n    border-color: #007bff;\n    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>Yap\u0131sal S\u00f6zde S\u0131n\u0131flar<\/h4>\n<p>Bir \u00f6\u011fenin ebeveyni i\u00e7indeki konumuna g\u00f6re hedefleme yaparlar:<\/p>\n<ul>\n<li><code>:first-child<\/code>: Ebeveyninin ilk \u00e7ocu\u011fu olan \u00f6\u011fe.<\/li>\n<li><code>:last-child<\/code>: Ebeveyninin son \u00e7ocu\u011fu olan \u00f6\u011fe.<\/li>\n<li><code>:nth-child(n)<\/code>: Ebeveyninin n'inci \u00e7ocu\u011fu olan \u00f6\u011fe. (<code>n<\/code> bir say\u0131, anahtar kelime (<code>even<\/code>, <code>odd<\/code>) veya bir form\u00fcl (<code>2n+1<\/code>) olabilir).<\/li>\n<li><code>:nth-last-child(n)<\/code>: Ebeveyninin sondan n'inci \u00e7ocu\u011fu olan \u00f6\u011fe.<\/li>\n<li><code>:only-child<\/code>: Ebeveyninin tek \u00e7ocu\u011fu olan \u00f6\u011fe.<\/li>\n<\/ul>\n<pre><code>li:first-child {\n    font-weight: bold;\n}\n\nli:nth-child(even) {\n    background-color: #f2f2f2;\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>Form S\u00f6zde S\u0131n\u0131flar\u0131<\/h4>\n<p>Form elemanlar\u0131n\u0131n durumlar\u0131na g\u00f6re hedefleme yaparlar:<\/p>\n<ul>\n<li><code>:checked<\/code>: \u0130\u015faretlenmi\u015f (checkbox, radio) \u00f6\u011feler.<\/li>\n<li><code>:disabled<\/code>: Devre d\u0131\u015f\u0131 b\u0131rak\u0131lm\u0131\u015f \u00f6\u011feler.<\/li>\n<li><code>:enabled<\/code>: Etkin \u00f6\u011feler.<\/li>\n<li><code>:read-only<\/code>: Salt okunur \u00f6\u011feler.<\/li>\n<li><code>:required<\/code>: Gerekli alanlar.<\/li>\n<\/ul>\n<pre><code>input[type=\"checkbox\"]:checked + label {\n    color: #007bff;\n    font-weight: bold;\n}\n\ninput:disabled {\n    background-color: #e9ecef;\n    cursor: not-allowed;\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>Di\u011fer Yayg\u0131n S\u00f6zde S\u0131n\u0131flar<\/h4>\n<ul>\n<li><code>:not(selector)<\/code>: Belirtilen se\u00e7iciyle e\u015fle\u015fmeyen \u00f6\u011feler.<\/li>\n<li><code>:empty<\/code>: Hi\u00e7bir \u00e7ocu\u011fu (metin d\u00fc\u011f\u00fcmleri dahil) olmayan \u00f6\u011feler.<\/li>\n<\/ul>\n<pre><code>div:not(.ad) {\n    border: 1px solid #ccc;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, <code>.ad<\/code> s\u0131n\u0131f\u0131na sahip olmayan t\u00fcm <code><\/p>\n<div><\/code> \u00f6\u011felerine kenarl\u0131k ekler.<\/p>\n<h3>S\u00f6zde Eleman Se\u00e7iciler: \u00d6\u011felerin B\u00f6l\u00fcmlerini Hedefleme<\/h3>\n<p>S\u00f6zde elemanlar, bir \u00f6\u011fenin belirli bir b\u00f6l\u00fcm\u00fcn\u00fc veya \u00f6\u011fenin i\u00e7ine sanal i\u00e7erik eklemenizi sa\u011flayan \u00f6zel se\u00e7icilerdir. \u00c7ift iki nokta \u00fcst \u00fcste (<code>::<\/code>) ile belirtilirler.<\/p>\n<h4><code>::before<\/code> ve <code>::after<\/code><\/h4>\n<p>Bu s\u00f6zde elemanlar, se\u00e7ilen \u00f6\u011fenin i\u00e7eri\u011finden \u00f6nce veya sonra sanal i\u00e7erik eklemek i\u00e7in kullan\u0131l\u0131r. Genellikle dekoratif \u00f6\u011feler, ikonlar veya metin eklemek i\u00e7in kullan\u0131l\u0131rlar.<\/p>\n<pre><code>p::before {\n    content: \"\u27a1\ufe0f \";\n    color: #007bff;\n}\n\nh3::after {\n    content: \"\";\n    display: block;\n    width: 50px;\n    height: 2px;\n    background-color: #007bff;\n    margin-top: 5px;\n}\n<\/pre>\n<p><\/code><\/p>\n<p><code>content<\/code> \u00f6zelli\u011fi, <code>::before<\/code> ve <code>::after<\/code> ile kullan\u0131lmas\u0131 zorunlu olan tek \u00f6zelliktir. Bo\u015f b\u0131rakmak isterseniz <code>content: \"\";<\/code> kullanabilirsiniz.<\/p>\n<h4><code>::first-line<\/code> ve <code>::first-letter<\/code><\/h4>\n<p>Bu s\u00f6zde elemanlar, bir metin blo\u011funun ilk sat\u0131r\u0131n\u0131 veya ilk harfini hedeflemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code>p::first-line {\n    font-weight: bold;\n    color: #333;\n}\n\np::first-letter {\n    font-size: 2em;\n    float: left;\n    margin-right: 5px;\n}\n<\/pre>\n<p><\/code><\/p>\n<p><code>::first-line<\/code> i\u00e7in yaln\u0131zca belirli CSS \u00f6zellikleri (font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height) uygulanabilir. <code>::first-letter<\/code> i\u00e7in ise daha fazla \u00f6zellik kullan\u0131labilir.<\/p>\n<h4><code>::selection<\/code><\/h4>\n<p><code>::selection<\/code>, kullan\u0131c\u0131 taraf\u0131ndan se\u00e7ilen (vurgulanan) metnin stilini de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code>::selection {\n    background-color: #007bff;\n    color: white;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, web sitenizdeki metin se\u00e7ildi\u011finde arka plan rengini mavi, metin rengini beyaz yapar.<\/p>\n<h3>Nitelik Se\u00e7iciler: Niteliklere G\u00f6re Hedefleme<\/h3>\n<p>Nitelik se\u00e7iciler, HTML \u00f6\u011felerinin sahip oldu\u011fu niteliklere (attribute) ve bu niteliklerin de\u011ferlerine g\u00f6re hedefleme yapman\u0131z\u0131 sa\u011flar. Bu, form \u00f6\u011feleri, resimler veya \u00f6zel veri nitelikleri gibi durumlarda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h4>Tam E\u015fle\u015fme (<code>[attr=\"value\"]<\/code>)<\/h4>\n<p>Belirli bir niteli\u011fe ve tam olarak o de\u011fere sahip \u00f6\u011feleri se\u00e7er.<\/p>\n<pre><code>input[type=\"text\"] {\n    border: 1px solid #ccc;\n    padding: 8px;\n}\n\na[target=\"_blank\"] {\n    color: #28a745;\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>\u0130\u00e7eren De\u011fer (<code>[attr*=\"value\"]<\/code>)<\/h4>\n<p>Nitelik de\u011feri i\u00e7inde belirtilen alt dizgiyi i\u00e7eren \u00f6\u011feleri se\u00e7er.<\/p>\n<pre><code>img[alt*=\"logo\"] {\n    border: 2px solid #007bff;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, <code>alt<\/code> niteli\u011fi \"logo\" kelimesini i\u00e7eren t\u00fcm resimlere kenarl\u0131k ekler.<\/p>\n<h4>Ba\u015flang\u0131\u00e7 De\u011feri (<code>[attr^=\"value\"]<\/code>)<\/h4>\n<p>Nitelik de\u011feri belirtilen alt dizgiyle ba\u015flayan \u00f6\u011feleri se\u00e7er.<\/p>\n<pre><code>a[href^=\"https:\/\/\"] {\n    color: green;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, <code>https:\/\/<\/code> ile ba\u015flayan t\u00fcm ba\u011flant\u0131lar\u0131 ye\u015fil yapar.<\/p>\n<h4>Biti\u015f De\u011feri (<code>[attr$=\"value\"]<\/code>)<\/h4>\n<p>Nitelik de\u011feri belirtilen alt dizgiyle biten \u00f6\u011feleri se\u00e7er.<\/p>\n<pre><code>a[href$=\".pdf\"] {\n    font-weight: bold;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, <code>.pdf<\/code> ile biten t\u00fcm ba\u011flant\u0131lar\u0131 kal\u0131n yapar.<\/p>\n<h4>Bo\u015flukla Ayr\u0131lm\u0131\u015f Kelime (<code>[attr~=\"value\"]<\/code>)<\/h4>\n<p>Nitelik de\u011feri, bo\u015flukla ayr\u0131lm\u0131\u015f kelimelerden biri olarak belirtilen kelimeyi i\u00e7eriyorsa \u00f6\u011feyi se\u00e7er.<\/p>\n<pre><code>[class~=\"warning\"] {\n    background-color: #fff3cd;\n    color: #856404;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, <code>class=\"message warning\"<\/code> gibi bir s\u0131n\u0131fa sahip \u00f6\u011feleri se\u00e7er.<\/p>\n<h4>Tire ile Ayr\u0131lm\u0131\u015f Kelime (<code>[attr|=\"value\"]<\/code>)<\/h4>\n<p>Nitelik de\u011feri, belirtilen kelimeyle tam olarak e\u015fle\u015fiyorsa veya tire (<code>-<\/code>) ile ayr\u0131lm\u0131\u015f bir liste i\u00e7inde ba\u015fl\u0131yorsa \u00f6\u011feyi se\u00e7er. Genellikle dil nitelikleri (<code>lang<\/code>) i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code>[lang|=\"en\"] {\n    font-style: italic;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, <code>lang=\"en\"<\/code> veya <code>lang=\"en-US\"<\/code> gibi \u00f6\u011feleri se\u00e7er.<\/p>\n<h3>Geli\u015fmi\u015f Se\u00e7ici Kombinasyonlar\u0131 ve \u00d6zellikleri<\/h3>\n<p>Se\u00e7icileri tek tek kullanmak yerine, onlar\u0131 birle\u015ftirerek \u00e7ok daha spesifik hedeflemeler yapabilirsiniz. Ancak bu, CSS'in \u00f6nemli bir kavram\u0131 olan \"\u00f6zg\u00fcll\u00fck\" (specificity) kavram\u0131n\u0131 da beraberinde getirir.<\/p>\n<h4>Birden Fazla Se\u00e7iciyi Birle\u015ftirme (Virg\u00fcl <code>,<\/code>)<\/h4>\n<p>Birden fazla se\u00e7iciye ayn\u0131 stil kurallar\u0131n\u0131 uygulamak istedi\u011finizde, se\u00e7icileri virg\u00fclle ay\u0131rarak listeleyebilirsiniz.<\/p>\n<pre><code>h1, h2, h3 {\n    font-family: 'Open Sans', sans-serif;\n    margin-bottom: 15px;\n}\n\n.card, .widget {\n    border: 1px solid #ddd;\n    padding: 20px;\n    border-radius: 8px;\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>\u00d6zellik (Specificity) Kavram\u0131<\/h4>\n<p>Bir \u00f6\u011feye birden fazla CSS kural\u0131 uygulanmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131nda, hangi kural\u0131n kazanaca\u011f\u0131n\u0131 belirleyen mekanizmaya \u00f6zg\u00fcll\u00fck denir. \u00d6zg\u00fcll\u00fck, bir puanlama sistemi gibi \u00e7al\u0131\u015f\u0131r:<\/p>\n<ol>\n<li><strong>Inline Stiller:<\/strong> En y\u00fcksek \u00f6zg\u00fcll\u00fck (1,0,0,0).<\/li>\n<li><strong>ID Se\u00e7iciler:<\/strong> Y\u00fcksek \u00f6zg\u00fcll\u00fck (0,1,0,0).<\/li>\n<li><strong>S\u0131n\u0131f Se\u00e7iciler, Nitelik Se\u00e7iciler, S\u00f6zde S\u0131n\u0131flar:<\/strong> Orta \u00f6zg\u00fcll\u00fck (0,0,1,0).<\/li>\n<li><strong>Tip Se\u00e7iciler, S\u00f6zde Elemanlar:<\/strong> D\u00fc\u015f\u00fck \u00f6zg\u00fcll\u00fck (0,0,0,1).<\/li>\n<li><strong>Evrensel Se\u00e7ici:<\/strong> En d\u00fc\u015f\u00fck \u00f6zg\u00fcll\u00fck (0,0,0,0).<\/li>\n<\/ol>\n<p>Daha y\u00fcksek puanl\u0131 se\u00e7ici her zaman kazan\u0131r. E\u015fit puan durumunda, CSS dosyas\u0131nda daha sonra tan\u0131mlanan kural kazan\u0131r.<\/p>\n<pre><code>\/* \u00d6zg\u00fcll\u00fck: (0,0,1,0) *\/\n.my-paragraph {\n    color: blue;\n}\n\n\/* \u00d6zg\u00fcll\u00fck: (0,0,0,1) *\/\np {\n    color: red;\n}\n\n\/* <p class=\"my-paragraph\"> metni mavi olacakt\u0131r. *\/\n<\/pre>\n<p><\/code><\/p>\n<h4><code>!important<\/code> Kullan\u0131m\u0131 ve Sak\u0131ncalar\u0131<\/h4>\n<p><code>!important<\/code> anahtar kelimesi, bir stil kural\u0131n\u0131n \u00f6zg\u00fcll\u00fc\u011f\u00fcn\u00fc di\u011fer t\u00fcm kurallar\u0131n \u00fczerine \u00e7\u0131kararak en y\u00fcksek \u00f6nceli\u011fi vermesini sa\u011flar. Ancak, bu kullan\u0131m\u0131 genellikle ka\u00e7\u0131n\u0131lmas\u0131 gereken bir uygulamad\u0131r \u00e7\u00fcnk\u00fc:<\/p>\n<ul>\n<li>CSS'in do\u011fal \u00f6zg\u00fcll\u00fck ak\u0131\u015f\u0131n\u0131 bozar.<\/li>\n<li>Bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r ve hata ay\u0131klamay\u0131 karma\u015f\u0131k hale getirir.<\/li>\n<li>Daha sonraki stillerin \u00fczerine yaz\u0131lmas\u0131n\u0131 imkans\u0131z hale getirebilir.<\/li>\n<\/ul>\n<pre><code>.my-element {\n    color: green !important; \/* T\u00fcm di\u011fer renk kurallar\u0131n\u0131 ge\u00e7ersiz k\u0131lar *\/\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Genellikle, <code>!important<\/code> yerine daha spesifik se\u00e7iciler yazmak veya CSS mimarinizi yeniden g\u00f6zden ge\u00e7irmek daha iyi bir yakla\u015f\u0131md\u0131r.<\/p>\n<h3>En \u0130yi Uygulamalar ve Performans<\/h3>\n<p>Etkili CSS se\u00e7iciler yazmak, yaln\u0131zca \u00f6\u011feleri do\u011fru hedeflemekle kalmaz, ayn\u0131 zamanda kodunuzun okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve web sitenizin performans\u0131n\u0131 da etkiler.<\/p>\n<h4>Se\u00e7ici Karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 Azaltma<\/h4>\n<p>\u00c7ok uzun ve karma\u015f\u0131k se\u00e7icilerden ka\u00e7\u0131nmak, hem okunabilirlik hem de performans a\u00e7\u0131s\u0131ndan \u00f6nemlidir. Taray\u0131c\u0131lar, se\u00e7icileri sa\u011fdan sola do\u011fru okur. Bu nedenle, se\u00e7icinin en sa\u011f\u0131ndaki k\u0131s\u0131m ne kadar spesifikse, taray\u0131c\u0131n\u0131n e\u015fle\u015fen \u00f6\u011feleri bulmas\u0131 o kadar h\u0131zl\u0131 olur.<\/p>\n<pre><code>\/* K\u00f6t\u00fc \u00f6rnek: \u00c7ok genel bir ba\u015flang\u0131\u00e7 *\/\ndiv.container ul li a { ... }\n\n\/* Daha iyi \u00f6rnek: Daha spesifik bir ba\u015flang\u0131\u00e7 *\/\n.main-nav__item-link { ... }\n<\/pre>\n<p><\/code><\/p>\n<h4>ID ve S\u0131n\u0131f Se\u00e7icilerini Etkin Kullanma<\/h4>\n<p>*   <strong>ID'ler:<\/strong> Sayfada tek ve benzersiz olmas\u0131 gereken ana d\u00fczen \u00f6\u011feleri veya JavaScript ile etkile\u015fime girecek belirli \u00f6\u011feler i\u00e7in kullan\u0131n.<br \/>\n*   <strong>S\u0131n\u0131flar:<\/strong> Tekrar kullan\u0131labilir stil bloklar\u0131 olu\u015fturmak i\u00e7in ana tercihiniz olmal\u0131d\u0131r. Bir \u00f6\u011feye birden fazla s\u0131n\u0131f atayarak esnek stiller olu\u015fturabilirsiniz.<\/p>\n<h4>Performans \u0130pu\u00e7lar\u0131<\/h4>\n<ul>\n<li><strong>Evrensel se\u00e7iciden ka\u00e7\u0131n\u0131n:<\/strong> <code>*<\/code> se\u00e7icisi her \u00f6\u011feyi etkiledi\u011fi i\u00e7in performans d\u00fc\u015f\u00fc\u015f\u00fcne neden olabilir.<\/li>\n<li><strong>Nitelik se\u00e7icileri dikkatli kullan\u0131n:<\/strong> \u00d6zellikle <code>[attr*=\"value\"]<\/code> gibi k\u0131smi e\u015fle\u015fmeler, taray\u0131c\u0131lar\u0131n t\u00fcm DOM'u taramas\u0131n\u0131 gerektirebilir.<\/li>\n<li><strong>Gereksiz yere torun se\u00e7icileri derinle\u015ftirmeyin:<\/strong> <code>div div div p<\/code> gibi se\u00e7iciler yerine, m\u00fcmk\u00fcnse daha spesifik s\u0131n\u0131flar kullan\u0131n.<\/li>\n<li><strong>CSS'i optimize edin:<\/strong> Gereksiz stilleri kald\u0131r\u0131n ve CSS dosyalar\u0131n\u0131z\u0131 s\u0131k\u0131\u015ft\u0131r\u0131n.<\/li>\n<\/ul>\n<h3>Sonu\u00e7<\/h3>\n<p>CSS se\u00e7iciler, web geli\u015ftirme yolculu\u011funuzda ustala\u015fman\u0131z gereken temel ve g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Bu makalede ele ald\u0131\u011f\u0131m\u0131z temel, kombinat\u00f6r, s\u00f6zde s\u0131n\u0131f, s\u00f6zde eleman ve nitelik se\u00e7icileri anlayarak ve do\u011fru bir \u015fekilde kullanarak, HTML belgelerinizdeki \u00f6\u011feleri inan\u0131lmaz bir hassasiyetle hedefleyebilir, daha d\u00fczenli, okunabilir ve bak\u0131m\u0131 kolay CSS kodlar\u0131 yazabilirsiniz. \u00d6zg\u00fcll\u00fck kavram\u0131n\u0131 anlamak ve en iyi uygulamalar\u0131 takip etmek, performansl\u0131 ve s\u00fcrd\u00fcr\u00fclebilir web siteleri olu\u015fturman\u0131z i\u00e7in kritik \u00f6neme sahiptir. Se\u00e7icilerde ustala\u015fmak, web tasar\u0131mlar\u0131n\u0131za hayat veren stil kurallar\u0131n\u0131 yazarken size tam kontrol sa\u011flayacakt\u0131r.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<dl>\n<dt><strong>S: CSS se\u00e7iciler neden \u00f6nemlidir?<\/strong><\/dt>\n<dd>C: CSS se\u00e7iciler, HTML belgesindeki belirli \u00f6\u011feleri se\u00e7erek onlara stil kurallar\u0131 uygulaman\u0131z\u0131 sa\u011flar. Bu sayede web sayfalar\u0131n\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kontrol edebilir, g\u00f6rsel tutarl\u0131l\u0131k sa\u011flayabilir ve kullan\u0131c\u0131 deneyimini iyile\u015ftirebilirsiniz.<\/dd>\n<dt><strong>S: ID se\u00e7ici ile s\u0131n\u0131f se\u00e7ici aras\u0131ndaki temel fark nedir?<\/strong><\/dt>\n<dd>C: ID se\u00e7ici (<code>#id<\/code>), bir HTML belgesinde yaln\u0131zca bir kez kullan\u0131lmas\u0131 gereken benzersiz bir \u00f6\u011feyi hedefler. S\u0131n\u0131f se\u00e7ici (<code>.class<\/code>) ise birden fazla \u00f6\u011feye atanabilir ve tekrar kullan\u0131labilir stil bloklar\u0131 olu\u015fturmak i\u00e7in idealdir. \u00d6zg\u00fcll\u00fck a\u00e7\u0131s\u0131ndan ID se\u00e7iciler daha y\u00fcksek \u00f6nceli\u011fe sahiptir.<\/dd>\n<dt><strong>S: <code>!important<\/code> kullanmak ne zaman uygun olabilir?<\/strong><\/dt>\n<dd>C: <code>!important<\/code> kullan\u0131m\u0131 genellikle ka\u00e7\u0131n\u0131lmas\u0131 gereken bir uygulamad\u0131r. Ancak, \u00e7ok nadiren ve ge\u00e7ici \u00e7\u00f6z\u00fcmler olarak, \u00f6rne\u011fin geli\u015ftirme s\u0131ras\u0131nda h\u0131zl\u0131 testler yapmak veya d\u0131\u015far\u0131dan gelen bir k\u00fct\u00fcphanenin stilini ge\u00e7ersiz k\u0131lmak gibi durumlarda kullan\u0131labilir. Uzun vadeli ve s\u00fcrd\u00fcr\u00fclebilir projelerde kullan\u0131m\u0131 \u00f6nerilmez.<\/dd>\n<dt><strong>S: S\u00f6zde s\u0131n\u0131flar ve s\u00f6zde elemanlar aras\u0131ndaki fark nedir?<\/strong><\/dt>\n<dd>C: S\u00f6zde s\u0131n\u0131flar (<code>:hover<\/code>, <code>:nth-child<\/code> gibi), bir \u00f6\u011fenin belirli bir durumunu (\u00f6rne\u011fin fare \u00fczerine gelme) veya konumunu (\u00f6rne\u011fin ilk \u00e7ocuk olma) hedefler. S\u00f6zde elemanlar (<code>::before<\/code>, <code>::first-line<\/code> gibi) ise bir \u00f6\u011fenin belirli bir b\u00f6l\u00fcm\u00fcn\u00fc hedefler veya \u00f6\u011fenin i\u00e7eri\u011fine sanal i\u00e7erik ekler. S\u00f6zde s\u0131n\u0131flar tek iki nokta \u00fcst \u00fcste (<code>:<\/code>), s\u00f6zde elemanlar ise \u00e7ift iki nokta \u00fcst \u00fcste (<code>::<\/code>) ile yaz\u0131l\u0131r.<\/dd>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"Yukar\u0131daki \u00f6rnek, t\u00fcm \u00f6\u011felerin d\u0131\u015f ve i\u00e7 bo\u015fluklar\u0131n\u0131 s\u0131f\u0131rlar ve kutu modelini border-box olarak ayarlar. Ancak, performans a\u00e7\u0131s\u0131ndan \u00e7ok g&#8230;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-38440","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme\" \/>\n<meta property=\"og:description\" content=\"Yukar\u0131daki \u00f6rnek, t\u00fcm \u00f6\u011felerin d\u0131\u015f ve i\u00e7 bo\u015fluklar\u0131n\u0131 s\u0131f\u0131rlar ve kutu modelini border-box olarak ayarlar. Ancak, performans a\u00e7\u0131s\u0131ndan \u00e7ok g...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-31T08:00:37+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme\",\"datePublished\":\"2026-01-31T08:00:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/\"},\"wordCount\":2238,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/\",\"name\":\"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-31T08:00:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme","og_description":"Yukar\u0131daki \u00f6rnek, t\u00fcm \u00f6\u011felerin d\u0131\u015f ve i\u00e7 bo\u015fluklar\u0131n\u0131 s\u0131f\u0131rlar ve kutu modelini border-box olarak ayarlar. Ancak, performans a\u00e7\u0131s\u0131ndan \u00e7ok g...","og_url":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-31T08:00:37+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"13 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme","datePublished":"2026-01-31T08:00:37+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/"},"wordCount":2238,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/","url":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/","name":"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-31T08:00:37+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-seciciler-101-ogeleri-hassasiyetle-hedefleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Se\u00e7iciler 101: \u00d6\u011feleri Hassasiyetle Hedefleme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=38440"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38440\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}