{"id":31834,"date":"2025-10-14T15:41:20","date_gmt":"2025-10-14T12:41:20","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31834"},"modified":"2025-10-14T15:41:20","modified_gmt":"2025-10-14T12:41:20","slug":"csste-not-pseudo-sinifi-secim-mantigini-tersine-cevirmek","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/csste-not-pseudo-sinifi-secim-mantigini-tersine-cevirmek\/","title":{"rendered":"CSS’te :not Pseudo-S\u0131n\u0131f\u0131: Se\u00e7im Mant\u0131\u011f\u0131n\u0131 Tersine \u00c7evirmek"},"content":{"rendered":"

<\/p>\n

CSS’te :not Pseudo-S\u0131n\u0131f\u0131: Se\u00e7im Mant\u0131\u011f\u0131n\u0131 Tersine \u00c7evirmek<\/h2>\n

Web tasar\u0131m ve geli\u015ftirme s\u00fcre\u00e7lerinde, CSS se\u00e7iciler (selectors) belirli HTML elemanlar\u0131n\u0131 hedeflemek ve onlara stil uygulamak i\u00e7in vazge\u00e7ilmez ara\u00e7lard\u0131r. S\u0131n\u0131flar, ID’ler, etiket adlar\u0131, \u00f6znitelikler ve \u00e7e\u015fitli pseudo-s\u0131n\u0131flar (s\u00f6zde s\u0131n\u0131flar) arac\u0131l\u0131\u011f\u0131yla elemanlar\u0131 se\u00e7me yetene\u011fi, stil sayfalar\u0131m\u0131z\u0131n g\u00fcc\u00fcn\u00fc ve esnekli\u011fini belirler. Ancak bazen bir eleman\u0131, belirli bir \u00f6zelli\u011fe sahip olmayan<\/em> veya belirli bir kritere uymayan<\/em> di\u011fer elemanlar aras\u0131ndan ay\u0131klamak isteriz. \u0130\u015fte tam da bu noktada CSS’in g\u00fc\u00e7l\u00fc :not<\/code> pseudo-s\u0131n\u0131f\u0131 devreye girer. :not<\/code> pseudo-s\u0131n\u0131f\u0131, kelimenin tam anlam\u0131yla “\u015funa uymayan” anlam\u0131na gelir ve se\u00e7icilerimizin mant\u0131\u011f\u0131n\u0131 tersine \u00e7evirerek, belirli ko\u015fullar\u0131 sa\u011flamayan elemanlar\u0131 hedeflememizi sa\u011flar. Bu makalede, :not<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n temel kullan\u0131m\u0131ndan geli\u015fmi\u015f senaryolar\u0131na, \u00f6zg\u00fcnl\u00fck (specificity) kurallar\u0131ndan pratik \u00f6rneklerine ve dikkat edilmesi gereken noktalara kadar her y\u00f6n\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Giri\u015f: :not<\/code> Nedir ve Neden \u00d6nemlidir?<\/h2>\n

:not<\/code> pseudo-s\u0131n\u0131f\u0131, CSS3 ile tan\u0131t\u0131lm\u0131\u015f ve modern web geli\u015ftirmenin ayr\u0131lmaz bir par\u00e7as\u0131 haline gelmi\u015f g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Temel amac\u0131, kendisine arg\u00fcman olarak verilen bir se\u00e7iciyi (veya CSS4 ile birden fazla se\u00e7iciyi) kar\u015f\u0131lamayan elemanlar\u0131 se\u00e7mektir. \u00d6rne\u011fin, bir web sayfas\u0131ndaki t\u00fcm div<\/code> elemanlar\u0131n\u0131 se\u00e7mek, ancak \u00f6zel bir highlight<\/code> s\u0131n\u0131f\u0131na sahip olanlar\u0131 hari\u00e7 tutmak istedi\u011finizde :not(.highlight)<\/code> ifadesini kullanabilirsiniz. Bu, kodu daha temiz, daha okunabilir ve daha s\u00fcrd\u00fcr\u00fclebilir hale getirir.<\/p>\n

:not<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n \u00f6nemi birka\u00e7 a\u00e7\u0131dan ele al\u0131nabilir:<\/p>\n

* Esneklik:<\/strong> Normalde pozitif bir se\u00e7imle (yani “\u015funa sahip olan\u0131 se\u00e7”) \u00e7\u00f6zemeyece\u011finiz durumlar i\u00e7in esnek bir \u00e7\u00f6z\u00fcm sunar.
\n* Kod Temizli\u011fi:<\/strong> Karma\u015f\u0131k se\u00e7ici zincirlerinden veya JavaScript m\u00fcdahalelerinden ka\u00e7\u0131narak CSS kodunuzu sadele\u015ftirmenize yard\u0131mc\u0131 olur. \u00d6rne\u011fin, belirli bir eleman hari\u00e7 t\u00fcm karde\u015f elemanlara stil uygulamak i\u00e7in uzun +<\/code> se\u00e7ici zincirleri yerine :not<\/code> kullanmak daha zariftir.
\n* Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong> Bir \u015feye stil uygulamak yerine, belirli bir \u015feyi hari\u00e7 tutarak stil uygulamak, gelecekteki de\u011fi\u015fikliklerde daha az hata yapma potansiyeli ta\u015f\u0131r. Yeni bir eleman eklendi\u011finde, mevcut :not<\/code> kural\u0131 genellikle otomatik olarak \u00e7al\u0131\u015fmaya devam eder.<\/p>\n

:not<\/code> pseudo-s\u0131n\u0131f\u0131, \u00f6zellikle bir eleman listesindeki son veya ilk elemanlara \u00f6zel stil uygulamak, belirli form elemanlar\u0131n\u0131 d\u0131\u015flamak veya bir bile\u015fenin belirli varyantlar\u0131n\u0131 hari\u00e7 tutmak gibi yayg\u0131n senaryolarda hayat kurtar\u0131c\u0131 olabilir.<\/p>\n

Temel Kullan\u0131m ve S\u00f6zdizimi<\/h2>\n

:not<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n temel s\u00f6zdizimi olduk\u00e7a basittir:<\/p>\n

:not(selector) {\n  \/ CSS \u00f6zellikleri <\/em>\/\n}<\/code><\/pre>\n
Burada selector<\/code>, hari\u00e7 tutmak istedi\u011finiz eleman\u0131 temsil eden herhangi bir ge\u00e7erli CSS se\u00e7icidir. Bu bir etiket ad\u0131, bir s\u0131n\u0131f, bir ID, bir \u00f6znitelik veya ba\u015fka bir pseudo-s\u0131n\u0131f olabilir.<\/p>\n
\u0130\u015fte baz\u0131 temel kullan\u0131m \u00f6rnekleri:<\/p>\n
*   Belirli bir s\u0131n\u0131fa sahip olmayan t\u00fcm paragraflar\u0131 se\u00e7me:<\/strong><\/p>\n
p:not(.intro) {\n      color: #333;\n      font-weight: normal;\n    }<\/code><\/pre>\n
    Bu kural, intro<\/code> s\u0131n\u0131f\u0131na sahip olmayan t\u00fcm <\/p>\n
<\/code> elemanlar\u0131na uygulan\u0131r. intro<\/code> s\u0131n\u0131f\u0131na sahip olanlar ise bu stilden etkilenmez.<\/p>\n
*   Belirli bir ID’ye sahip olmayan t\u00fcm div<\/code> elemanlar\u0131n\u0131 se\u00e7me:<\/strong><\/p>\n
div:not(#sidebar) {\n      background-color: #f0f0f0;\n      padding: 20px;\n    }<\/code><\/pre>\n
    Bu \u00f6rnek, sidebar<\/code> ID’sine sahip div<\/code> hari\u00e7 t\u00fcm div<\/code> elemanlar\u0131na arka plan rengi ve dolgu uygular.<\/p>\n
*   target=\"_blank\"<\/code> \u00f6zniteli\u011fine sahip olmayan t\u00fcm ba\u011flant\u0131lar\u0131 se\u00e7me:<\/strong><\/p>\n
a:not([target=\"_blank\"]) {\n      text-decoration: underline;\n      color: blue;\n    }<\/code><\/pre>\n
    Bu kural, yeni bir sekmede a\u00e7\u0131lmayan (yani target=\"_blank\"<\/code> \u00f6zniteli\u011fi olmayan) t\u00fcm <\/code> etiketlerine alt \u00e7izgi ve mavi renk verir.<\/p>\n
*   Belirli bir pseudo-s\u0131n\u0131fa uymayan elemanlar\u0131 se\u00e7me:<\/strong><\/p>\n
input:not(:disabled) {\n      border: 1px solid #ccc;\n    }<\/code><\/pre>\n
    Bu \u00f6rnek, devre d\u0131\u015f\u0131 b\u0131rak\u0131lmam\u0131\u015f (yani :disabled<\/code> pseudo-s\u0131n\u0131f\u0131na sahip olmayan) t\u00fcm <\/code> elemanlar\u0131na kenarl\u0131k ekler.<\/p>\n
Bu \u00f6rnekler, :not<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n temel mant\u0131\u011f\u0131n\u0131 ve ne kadar esnek olabilece\u011fini g\u00f6stermektedir. \u0130\u00e7ine konulan se\u00e7ici ne kadar spesifik olursa olsun, :not<\/code> bu spesifikli\u011fi tersine \u00e7evirerek \u00e7al\u0131\u015f\u0131r.<\/p>\n
Geli\u015fmi\u015f Kullan\u0131m ve \u00c7oklu Se\u00e7iciler<\/h2>\n
:not<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n yetenekleri, CSS Seviye 3’ten CSS Seviye 4’e ge\u00e7i\u015fle birlikte \u00f6nemli \u00f6l\u00e7\u00fcde artm\u0131\u015ft\u0131r.<\/p>\n
CSS Seviye 3’teki S\u0131n\u0131rlamalar<\/h3>\n
CSS3’te, :not<\/code> pseudo-s\u0131n\u0131f\u0131 yaln\u0131zca tek bir basit se\u00e7iciyi<\/em> arg\u00fcman olarak kabul edebiliyordu. Basit se\u00e7iciler \u015funlard\u0131r:<\/p>\n
*   Etiket se\u00e7iciler (\u00f6rn: p<\/code>, div<\/code>)
\n*   S\u0131n\u0131f se\u00e7iciler (\u00f6rn: .intro<\/code>)
\n*   ID se\u00e7iciler (\u00f6rn: #main<\/code>)
\n*   \u00d6znitelik se\u00e7iciler (\u00f6rn: [type=\"text\"]<\/code>)
\n*   Baz\u0131 pseudo-s\u0131n\u0131flar (\u00f6rn: :first-child<\/code>, :hover<\/code>)<\/p>\n
Bu, \u015fu gibi kullan\u0131mlar\u0131n CSS3’te ge\u00e7ersiz<\/strong> oldu\u011fu anlam\u0131na geliyordu:<\/p>\n
\/ CSS3'te GE\u00c7ERS\u0130Z <\/em>\/\np:not(.intro, .highlight) { \/ ... <\/em>\/ }\ndiv:not(#sidebar, .ad-block) { \/ ... <\/em>\/ }<\/code><\/pre>\n
Birden fazla ko\u015fulu hari\u00e7 tutmak istedi\u011finizde, her :not<\/code> ifadesini zincirleme \u015feklinde kullanman\u0131z gerekiyordu:<\/p>\n
\/ CSS3'te ge\u00e7erli olan \u00e7\u00f6z\u00fcm <\/em>\/\np:not(.intro):not(.highlight) {\n  \/ Hem .intro hem de .highlight s\u0131n\u0131f\u0131na sahip olmayan paragraflar <\/em>\/\n}<\/code><\/pre>\n
Bu zincirleme kullan\u0131m, mant\u0131ksal olarak “AND” (VE) operat\u00f6r\u00fc gibi \u00e7al\u0131\u015f\u0131r: eleman, hem<\/em> .intro<\/code> s\u0131n\u0131f\u0131na sahip olmamal\u0131 hem de<\/em> .highlight<\/code> s\u0131n\u0131f\u0131na sahip olmamal\u0131d\u0131r.<\/p>\n
CSS Seviye 4 ile Se\u00e7ici Listeleri<\/h3>\n
CSS Seviye 4 ile birlikte, :not<\/code> pseudo-s\u0131n\u0131f\u0131 b\u00fcy\u00fck bir iyile\u015ftirme alm\u0131\u015ft\u0131r: art\u0131k arg\u00fcman olarak bir se\u00e7ici listesi<\/em> kabul edebilir. Bu, parantez i\u00e7inde virg\u00fclle ayr\u0131lm\u0131\u015f birden fazla se\u00e7ici kullanabilece\u011finiz anlam\u0131na gelir.<\/p>\n
\/ CSS4'te GE\u00c7ERL\u0130 <\/em>\/\n:not(selector1, selector2, selector3, ...) {\n  \/ CSS \u00f6zellikleri <\/em>\/\n}<\/code><\/pre>\n
Bu yeni yetenek, :not<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n mant\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirir. :not(selector1, selector2)<\/code> ifadesi, “selector1 veya selector2’den herhangi birine uymayan” elemanlar\u0131 se\u00e7er. Bu, mant\u0131ksal olarak bir “NOR” (NE… NE DE) operat\u00f6r\u00fc gibi d\u00fc\u015f\u00fcn\u00fclebilir: eleman, listedeki se\u00e7icilerin hi\u00e7birine<\/em> uymad\u0131\u011f\u0131nda se\u00e7ilir.<\/p>\n
\u00d6rnekler:<\/p>\n
*   intro<\/code> veya highlight<\/code> s\u0131n\u0131flar\u0131ndan herhangi birine sahip olmayan paragraflar:<\/strong><\/p>\n
p:not(.intro, .highlight) {\n      font-size: 1.1em;\n      line-height: 1.6;\n    }<\/code><\/pre>\n
    Bu kural, intro<\/code> s\u0131n\u0131f\u0131na sahip olmayan veya<\/em> highlight<\/code> s\u0131n\u0131f\u0131na sahip olmayan paragraflar\u0131 se\u00e7er. E\u011fer bir paragraf\u0131n ne intro<\/code> ne de highlight<\/code> s\u0131n\u0131f\u0131 varsa, bu stil ona uygulan\u0131r. E\u011fer sadece intro<\/code> s\u0131n\u0131f\u0131 varsa veya sadece highlight<\/code> s\u0131n\u0131f\u0131 varsa veya ikisi birden varsa, bu stil uygulanmaz.<\/p>\n
*   submit<\/code> veya button<\/code> tipinde olmayan t\u00fcm input<\/code> elemanlar\u0131:<\/strong><\/p>\n
input:not([type=\"submit\"], [type=\"button\"]) {\n      background-color: #f9f9f9;\n      border: 1px solid #ddd;\n    }<\/code><\/pre>\n
    Bu, formdaki metin, \u015fifre, say\u0131 vb. di\u011fer t\u00fcm input<\/code> alanlar\u0131na stil verir, ancak g\u00f6nder ve d\u00fc\u011fme tiplerini hari\u00e7 tutar.<\/p>\n
*   h1<\/code>, h2<\/code> veya h3<\/code> etiketleri hari\u00e7 t\u00fcm elemanlara varsay\u0131lan bir stil uygulama:<\/strong><\/p>\n
*:not(h1, h2, h3) {\n      margin-bottom: 0.8em;\n    }<\/code><\/pre>\n
    Bu \u00f6rnek, ba\u015fl\u0131k etiketleri d\u0131\u015f\u0131ndaki t\u00fcm elemanlara alt marj ekler.<\/p>\n
CSS4 ile gelen bu se\u00e7ici listesi \u00f6zelli\u011fi, :not<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n kullan\u0131m\u0131n\u0131 daha g\u00fc\u00e7l\u00fc ve daha \u00f6zl\u00fc hale getirmi\u015ftir. Eski CSS3 tarz\u0131 zincirleme p:not(.intro):not(.highlight)<\/code> ve yeni CSS4 tarz\u0131 p:not(.intro, .highlight)<\/code> aras\u0131ndaki fark, genellikle ayn\u0131 sonucu verir, ancak CSS4 s\u00f6zdizimi daha temiz ve okunabilir kabul edilir.<\/p>\n
\u00d6zg\u00fcnl\u00fck (Specificity) ve :not<\/code><\/h2>\n
CSS’te \u00f6zg\u00fcnl\u00fck, birden fazla kural\u0131n ayn\u0131 eleman\u0131 hedeflemesi durumunda hangi kural\u0131n uygulanaca\u011f\u0131n\u0131 belirleyen bir a\u011f\u0131rl\u0131kland\u0131rma sistemidir. :not<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n \u00f6zg\u00fcnl\u00fck \u00fczerindeki etkisi, s\u0131kl\u0131kla yanl\u0131\u015f anla\u015f\u0131lan ancak kritik bir konudur.<\/p>\n
Kural:<\/strong> :not()<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131n kendisi \u00f6zg\u00fcnl\u00fc\u011fe s\u0131f\u0131r<\/em> katk\u0131da bulunur. Bunun yerine, se\u00e7icinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc, parantez i\u00e7indeki en spesifik se\u00e7icinin<\/em> \u00f6zg\u00fcnl\u00fc\u011f\u00fc ile belirlenir.<\/p>\n
Bu kural\u0131 daha iyi anlamak i\u00e7in \u00f6rneklere bakal\u0131m:<\/p>\n
1.  p:not(.intro)<\/code><\/strong>
\n    *   p<\/code> eleman se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,0,0,1<\/code>
\n    *   .intro<\/code> s\u0131n\u0131f se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,0,1,0<\/code>
\n    *   :not(.intro)<\/code> k\u0131sm\u0131n\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fc, .intro<\/code>‘nun \u00f6zg\u00fcnl\u00fc\u011f\u00fcd\u00fcr: 0,0,1,0<\/code>
\n    *   Toplam \u00f6zg\u00fcnl\u00fck: p<\/code>‘nin \u00f6zg\u00fcnl\u00fc\u011f\u00fc (0,0,0,1<\/code>) + :not(.intro)<\/code>‘nun \u00f6zg\u00fcnl\u00fc\u011f\u00fc (0,0,1,0<\/code>) = 0,0,1,1<\/code>.<\/p>\n
2.  div:not(#sidebar)<\/code><\/strong>
\n    *   div<\/code> eleman se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,0,0,1<\/code>
\n    *   #sidebar<\/code> ID se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,1,0,0<\/code>
\n    *   :not(#sidebar)<\/code> k\u0131sm\u0131n\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fc, #sidebar<\/code>‘\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fcd\u00fcr: 0,1,0,0<\/code>
\n    *   Toplam \u00f6zg\u00fcnl\u00fck: div<\/code>‘in \u00f6zg\u00fcnl\u00fc\u011f\u00fc (0,0,0,1<\/code>) + :not(#sidebar)<\/code>‘\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fc (0,1,0,0<\/code>) = 0,1,0,1<\/code>.<\/p>\n
3.  a:not([target=\"_blank\"])<\/code><\/strong>
\n    *   a<\/code> eleman se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,0,0,1<\/code>
\n    *   [target=\"_blank\"]<\/code> \u00f6znitelik se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,0,1,0<\/code>
\n    *   :not([target=\"_blank\"])<\/code> k\u0131sm\u0131n\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fc, [target=\"_blank\"]<\/code>‘\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fcd\u00fcr: 0,0,1,0<\/code>
\n    *   Toplam \u00f6zg\u00fcnl\u00fck: a<\/code>‘n\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fc (0,0,0,1<\/code>) + :not([target=\"_blank\"])<\/code>‘\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fc (0,0,1,0<\/code>) = 0,0,1,1<\/code>.<\/p>\n
4.  p:not(.intro, #main-content)<\/code> (CSS4 se\u00e7ici listesi)<\/strong>
\n    *   p<\/code> eleman se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,0,0,1<\/code>
\n    *   .intro<\/code> s\u0131n\u0131f se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,0,1,0<\/code>
\n    *   #main-content<\/code> ID se\u00e7icisinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc: 0,1,0,0<\/code>
\n    *   :not(.intro, #main-content)<\/code> k\u0131sm\u0131n\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fc, arg\u00fcman listesindeki en spesifik se\u00e7ici olan #main-content<\/code>‘\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fcd\u00fcr: 0,1,0,0<\/code>
\n    *   Toplam \u00f6zg\u00fcnl\u00fck: p<\/code>‘nin \u00f6zg\u00fcnl\u00fc\u011f\u00fc (0,0,0,1<\/code>) + :not(.intro, #main-content)<\/code>‘\u0131n \u00f6zg\u00fcnl\u00fc\u011f\u00fc (0,1,0,0<\/code>) = 0,1,0,1<\/code>.<\/p>\n
Bu kural\u0131 anlamak, beklenmedik stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek ve CSS kodunuzu daha \u00f6ng\u00f6r\u00fclebilir hale getirmek i\u00e7in hayati \u00f6neme sahiptir. :not<\/code> kendisi \u00f6zg\u00fcnl\u00fck eklemese de, i\u00e7indeki se\u00e7icinin \u00f6zg\u00fcnl\u00fc\u011f\u00fc nihai se\u00e7icinin g\u00fcc\u00fcn\u00fc belirler.<\/p>\n
Kullan\u0131m Senaryolar\u0131 ve Pratik \u00d6rnekler<\/h2>\n
:not<\/code> pseudo-s\u0131n\u0131f\u0131, \u00e7e\u015fitli pratik senaryolarda olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. \u0130\u015fte baz\u0131 yayg\u0131n kullan\u0131m durumlar\u0131:<\/p>\n
Son Eleman Haricindekileri Se\u00e7me<\/h3>\n
Listelerde veya navigasyon men\u00fclerinde, son elemana farkl\u0131 bir stil uygulamak (\u00f6rne\u011fin kenarl\u0131k olmamas\u0131) yayg\u0131n bir ihtiya\u00e7t\u0131r.<\/p>\n