\n
Bu da ba\u015fka bir paragraft\u0131r.<\/p>\n <\/div>\n<\/article><\/code><\/pre>\n
\u00d6rnek CSS:<\/strong><\/p>\nnav a {\n color: blue;\n text-decoration: none;\n}\n\narticle p {\n line-height: 1.6;\n font-family: serif;\n}<\/code><\/pre>\nBu \u00f6rnekte:
\n* nav a<\/code>, nav<\/code> elementi i\u00e7inde yer alan t\u00fcm a<\/code> (ba\u011flant\u0131) elementlerini se\u00e7er, do\u011frudan \u00e7ocuk olsalar da olmasalar da. Yani hem “Ana Sayfa” hem de “Web Tasar\u0131m” ba\u011flant\u0131lar\u0131 mavi olur.
\n* article p<\/code>, article<\/code> elementi i\u00e7inde yer alan t\u00fcm p<\/code> (paragraf) elementlerini se\u00e7er. Bu, div<\/code> i\u00e7inde yer alan paragraf\u0131 da kapsar.<\/p>\nKullan\u0131m Senaryolar\u0131 ve \u00d6rnekler<\/h4>\n
* Navigasyon men\u00fcleri i\u00e7indeki ba\u011flant\u0131lar\u0131 stilize etme:<\/strong> nav ul li a<\/code>
\n* Belirli bir bile\u015fen i\u00e7indeki metinleri veya ba\u015fl\u0131klar\u0131 bi\u00e7imlendirme:<\/strong> .card h3<\/code> veya .modal p<\/code>
\n* Genel sayfa yap\u0131s\u0131 i\u00e7inde belirli elementleri hedefleme:<\/strong> footer .copyright span<\/code><\/p>\nAvantajlar\u0131 ve Dikkat Edilmesi Gerekenler<\/h4>\n
Avantajlar\u0131:<\/strong>
\n* Esneklik:<\/strong> Derinlik fark etmeksizin t\u00fcm alt elementleri hedefler.
\n* Temiz HTML:<\/strong> Elementlere fazladan s\u0131n\u0131f veya ID eklemeye gerek kalmadan kapsaml\u0131 stilizasyon sa\u011flar.
\n* Okunabilirlik:<\/strong> CSS kodu, HTML yap\u0131s\u0131n\u0131 daha iyi yans\u0131t\u0131r.<\/p>\nDikkat Edilmesi Gerekenler:<\/strong>
\n* A\u015f\u0131r\u0131 Kapsay\u0131c\u0131l\u0131k:<\/strong> Bazen beklenenden daha fazla elementi se\u00e7ebilir, bu da istenmeyen yan etkilere yol a\u00e7abilir. Daha spesifik se\u00e7imler gerekti\u011finde \u00e7ocuk se\u00e7ici daha uygun olabilir.
\n* Performans:<\/strong> \u00c7ok karma\u015f\u0131k veya \u00e7ok genel soy se\u00e7iciler (\u00f6rn: div div div p<\/code>) taray\u0131c\u0131lar i\u00e7in hafif bir performans y\u00fck\u00fc olu\u015fturabilir, ancak modern taray\u0131c\u0131larda bu genellikle ihmal edilebilir d\u00fczeydedir.<\/p>\n\u00c7ocuk Se\u00e7ici (Child Combinator) – B\u00fcy\u00fckt\u00fcr \u0130\u015fareti (><\/code>)<\/h3>\n\u00c7ocuk se\u00e7ici, soy se\u00e7iciye k\u0131yasla daha spesifik bir ili\u015fkiyi hedefler. \u0130ki se\u00e7ici aras\u0131na b\u00fcy\u00fckt\u00fcr i\u015fareti (><\/code>) koyularak kullan\u0131l\u0131r.<\/p>\nTan\u0131m ve \u0130\u015fleyi\u015f<\/h4>\n
A > B<\/code> \u015feklinde bir se\u00e7ici, A<\/code> elementinin do\u011frudan \u00e7ocu\u011fu<\/em> olan B<\/code> elementini se\u00e7er. B<\/code> elementinin A<\/code>‘n\u0131n alt\u0131nda daha derin bir seviyede olmas\u0131 durumunda se\u00e7ilmez.<\/p>\n\u00d6rnek HTML:<\/strong><\/p>\n\n
Bu, container'\u0131n do\u011frudan \u00e7ocu\u011fudur.<\/p>\n
\n - \n
Bu, container'\u0131n do\u011frudan \u00e7ocu\u011fu de\u011fildir (ul'nin \u00e7ocu\u011fudur).<\/p>\n <\/li>\n <\/ul>\n \n Bu da container'\u0131n do\u011frudan \u00e7ocu\u011fu de\u011fildir (span'\u0131n \u00e7ocu\u011fudur).<\/p>\n <\/span>\n<\/div><\/code><\/pre>\n
\u00d6rnek CSS:<\/strong><\/p>\n.container > p {\n font-weight: bold;\n color: green;\n}<\/code><\/pre>\nBu \u00f6rnekte:
\n* .container > p<\/code>, .container<\/code> s\u0131n\u0131f\u0131na sahip div<\/code> elementinin do\u011frudan \u00e7ocu\u011fu olan p<\/code> elementini se\u00e7er. Bu sadece “Bu, container’\u0131n do\u011frudan \u00e7ocu\u011fudur.” paragraf\u0131n\u0131 etkiler.
\n* ul<\/code> veya span<\/code> i\u00e7indeki p<\/code> elementleri, .container<\/code>‘\u0131n do\u011frudan \u00e7ocu\u011fu olmad\u0131klar\u0131 i\u00e7in se\u00e7ilmezler.<\/p>\nKullan\u0131m Senaryolar\u0131 ve \u00d6rnekler<\/h4>\n
* Belirli bir liste yap\u0131s\u0131ndaki sadece ana seviye liste \u00f6\u011felerini stilize etme:<\/strong> ul > li<\/code>
\n* Bir bile\u015fenin ilk seviye elementlerine \u00f6zel stil uygulama:<\/strong> .card > h2<\/code>, .card > img<\/code>
\n* Grid veya Flexbox d\u00fczenlerinde do\u011frudan \u00e7ocuklara \u00f6zel bo\u015fluk veya hizalama verme:<\/strong> .grid-container > div<\/code><\/p>\nAvantajlar\u0131 ve Dikkat Edilmesi Gerekenler<\/h4>\n
Avantajlar\u0131:<\/strong>
\n* Hassasiyet:<\/strong> Yaln\u0131zca do\u011frudan \u00e7ocuklar\u0131 hedefleyerek \u00e7ok daha kesin se\u00e7imler sa\u011flar.
\n* Yap\u0131sal B\u00fct\u00fcnl\u00fck:<\/strong> HTML yap\u0131s\u0131n\u0131n belirli bir seviyesine ba\u011fl\u0131 kalarak stilize etmeyi kolayla\u015ft\u0131r\u0131r.
\n* Beklenirlik:<\/strong> Daha az istenmeyen yan etkiyle kar\u015f\u0131la\u015f\u0131l\u0131r, \u00e7\u00fcnk\u00fc yaln\u0131zca belirli bir ili\u015fkiyi hedefler.<\/p>\nDikkat Edilmesi Gerekenler:<\/strong>
\n* Esneklik K\u0131s\u0131tlamas\u0131:<\/strong> E\u011fer HTML yap\u0131s\u0131 s\u0131k s\u0131k de\u011fi\u015fiyorsa veya i\u00e7 i\u00e7e elementlerin derinli\u011fi belirsizse, \u00e7ocuk se\u00e7ici \u00e7ok kat\u0131 kalabilir.
\n* Detayc\u0131l\u0131k:<\/strong> Bazen, \u00f6zellikle \u00e7ok derin i\u00e7 i\u00e7e yap\u0131larla \u00e7al\u0131\u015f\u0131rken, her seviyeyi ayr\u0131 ayr\u0131 belirtmek yorucu olabilir.<\/p>\nBiti\u015fik Karde\u015f Se\u00e7ici (Adjacent Sibling Combinator) – Art\u0131 \u0130\u015fareti (+<\/code>)<\/h3>\nBiti\u015fik karde\u015f se\u00e7ici, ayn\u0131 ebeveynin do\u011frudan arkas\u0131ndan gelen karde\u015f elementini hedefler. \u0130ki se\u00e7ici aras\u0131na art\u0131 i\u015fareti (+<\/code>) koyularak kullan\u0131l\u0131r.<\/p>\nTan\u0131m ve \u0130\u015fleyi\u015f<\/h4>\n
A + B<\/code> \u015feklinde bir se\u00e7ici, A<\/code> elementinin hemen arkas\u0131ndan gelen B<\/code> elementini se\u00e7er. Her iki element de ayn\u0131 ebeveynin \u00e7ocuklar\u0131 olmal\u0131d\u0131r ve B<\/code> elementi, DOM yap\u0131s\u0131nda A<\/code>‘dan hemen sonra gelmelidir.<\/p>\n\u00d6rnek HTML:<\/strong><\/p>\n\n
Ba\u015fl\u0131k 1<\/h2>\n
Bu paragraf, Ba\u015fl\u0131k 1'in hemen arkas\u0131ndan geliyor.<\/p>\n
Bu paragraf da geliyor, ama hemen arkas\u0131ndan de\u011fil.<\/p>\n<\/div>\n\n
\n
Ba\u015fl\u0131k 2<\/h3>\n Bu bir span.<\/span>\n Bu paragraf, Ba\u015fl\u0131k 2'nin hemen arkas\u0131ndan gelmiyor.<\/p>\n<\/div><\/code><\/pre>\n
\u00d6rnek CSS:<\/strong><\/p>\nh2 + p {\n margin-top: 0;\n font-style: italic;\n color: #555;\n}<\/code><\/pre>\nBu \u00f6rnekte:
\n* h2 + p<\/code>, h2<\/code> elementinin hemen arkas\u0131ndan gelen p<\/code> elementini se\u00e7er. Bu sadece “Bu paragraf, Ba\u015fl\u0131k 1’in hemen arkas\u0131ndan geliyor.” paragraf\u0131n\u0131 etkiler.
\n* \u0130kinci p<\/code> elementi veya h3<\/code>‘ten sonra gelen span<\/code> veya p<\/code> elementleri se\u00e7ilmez, \u00e7\u00fcnk\u00fc ya hemen arkas\u0131ndan gelmiyorlar ya da farkl\u0131 bir element tipindeler.<\/p>\nKullan\u0131m Senaryolar\u0131 ve \u00d6rnekler<\/h4>\n
* Ba\u015fl\u0131k sonras\u0131 ilk paragrafa \u00f6zel stil verme:<\/strong> h1 + p<\/code> veya h2 + p<\/code>
\n* Bir element grubundaki ilk element hari\u00e7 di\u011ferlerine \u00fcst bo\u015fluk verme:<\/strong> div + div<\/code> (her div<\/code>‘in kendinden \u00f6nceki div<\/code>‘den sonra gelmesi durumunda)
\n* Form elementleri aras\u0131nda bo\u015fluk b\u0131rakma:<\/strong> label + input<\/code><\/p>\nAvantajlar\u0131 ve Dikkat Edilmesi Gerekenler<\/h4>\n
Avantajlar\u0131:<\/strong>
\n* Kompakt D\u00fczenleme:<\/strong> \u00d6zellikle ard\u0131\u015f\u0131k elementler aras\u0131ndaki bo\u015fluklar\u0131 veya ayr\u0131m\u0131 y\u00f6netmek i\u00e7in idealdir.
\n* Anlamsal Yakla\u015f\u0131m:<\/strong> HTML yap\u0131s\u0131ndaki do\u011fal ak\u0131\u015f\u0131 kullanarak stilize etmeyi sa\u011flar.
\n* Sadelik:<\/strong> Sadece bir sonraki elementi hedefledi\u011fi i\u00e7in kolayca anla\u015f\u0131l\u0131r.<\/p>\nDikkat Edilmesi Gerekenler:<\/strong>
\n S\u0131n\u0131rl\u0131 Kapsam:<\/strong> Yaln\u0131zca <\/em>hemen* arkas\u0131ndan gelen karde\u015fi hedefler. Daha genel bir karde\u015f se\u00e7imi i\u00e7in genel karde\u015f se\u00e7iciye ihtiya\u00e7 duyulur.
\n* DOM S\u0131ras\u0131 \u00d6nemlidir:<\/strong> HTML’deki elementlerin s\u0131ras\u0131 bu se\u00e7icinin \u00e7al\u0131\u015fmas\u0131 i\u00e7in kritiktir.<\/p>\nGenel Karde\u015f Se\u00e7ici (General Sibling Combinator) – Tilde \u0130\u015fareti (~<\/code>)<\/h3>\nGenel karde\u015f se\u00e7ici, biti\u015fik karde\u015f se\u00e7iciye benzer ancak daha geni\u015f bir kapsam sunar. \u0130ki se\u00e7ici aras\u0131na tilde i\u015fareti (~<\/code>) koyularak kullan\u0131l\u0131r.<\/p>\nTan\u0131m ve \u0130\u015fleyi\u015f<\/h4>\n
A ~ B<\/code> \u015feklinde bir se\u00e7ici, A<\/code> elementinden sonra gelen t\u00fcm<\/em> B<\/code> elementlerini se\u00e7er. Her iki element de ayn\u0131 ebeveynin \u00e7ocuklar\u0131 olmal\u0131d\u0131r, ancak B<\/code> elementinin A<\/code>‘dan hemen sonra gelmesi zorunlu de\u011fildir. A<\/code>‘dan sonraki herhangi bir noktada olabilir.<\/p>\n\u00d6rnek HTML:<\/strong><\/p>\n\n
Ba\u015fl\u0131k<\/h3>\n
Bu ilk paragraf.<\/p>\n
Bu bir div.<\/div>\n
Bu ikinci paragraf.<\/p>\n Bu bir span.<\/span>\n Bu \u00fc\u00e7\u00fcnc\u00fc paragraf.<\/p>\n<\/div><\/code><\/pre>\n
\u00d6rnek CSS:<\/strong><\/p>\nh3 ~ p {\n color: purple;\n border-bottom: 1px dashed lightgray;\n padding-bottom: 5px;\n}<\/code><\/pre>\nBu \u00f6rnekte:
\n* h3 ~ p<\/code>, h3<\/code> elementinden sonra gelen t\u00fcm p<\/code> elementlerini se\u00e7er. Bu, “Bu ilk paragraf.”, “Bu ikinci paragraf.” ve “Bu \u00fc\u00e7\u00fcnc\u00fc paragraf.” paragraflar\u0131n\u0131 etkiler.
\n* div<\/code> ve span<\/code> elementleri, p<\/code> olmad\u0131klar\u0131 i\u00e7in se\u00e7ilmezler.<\/p>\nKullan\u0131m Senaryolar\u0131 ve \u00d6rnekler<\/h4>\n
* Bir ba\u015fl\u0131k veya g\u00f6rselden sonra gelen t\u00fcm paragraflara stil verme:<\/strong> img ~ p<\/code>
\n* Dinamik UI bile\u015fenlerinde (\u00f6rne\u011fin, “checkbox hack” ile gizli i\u00e7erik g\u00f6sterme):<\/strong> input:checked ~ .target-content<\/code>
\n Belirli bir i\u015faretleyici elementten sonra gelen t\u00fcm karde\u015f elementlere ortak stil uygulama:<\/strong> .separator ~ <\/em><\/code><\/p>\nAvantajlar\u0131 ve Dikkat Edilmesi Gerekenler<\/h4>\n
Avantajlar\u0131:<\/strong>
\n* Geni\u015f Kapsam:<\/strong> Biti\u015fik karde\u015f se\u00e7iciye g\u00f6re daha fazla esneklik sunarak, bir elementten sonra gelen t\u00fcm ilgili karde\u015fleri hedefler.
\n* Dinamik Etkile\u015fimler:<\/strong> JavaScript olmadan bile basit etkile\u015fimli bile\u015fenler olu\u015fturmak i\u00e7in kullan\u0131labilir (\u00f6rne\u011fin, sekme aray\u00fczleri, a\u00e7\u0131l\u0131r men\u00fcler).
\n* Daha Az S\u0131n\u0131f:<\/strong> HTML’de fazladan s\u0131n\u0131f tan\u0131mlamadan geni\u015f bir etki alan\u0131 sa\u011flar.<\/p>\nDikkat Edilmesi Gerekenler:<\/strong>
\n* DOM S\u0131ras\u0131 Yine \u00d6nemlidir:<\/strong> A<\/code> elementinden \u00f6nce gelen B<\/code> elementlerini se\u00e7mez.
\n* Geni\u015f Etki Alan\u0131:<\/strong> Bazen beklenenden daha fazla elementi se\u00e7ebilir, bu da dikkatli kullan\u0131m gerektirir.<\/p>\n\u0130li\u015fkisel Se\u00e7icilerin Birlikte Kullan\u0131m\u0131 ve Karma\u015f\u0131kl\u0131k<\/h3>\n
\u0130li\u015fkisel se\u00e7iciler, tek ba\u015flar\u0131na g\u00fc\u00e7l\u00fc olsalar da, as\u0131l g\u00fc\u00e7lerini di\u011fer se\u00e7icilerle ve kendi aralar\u0131nda birle\u015ftirildiklerinde g\u00f6sterirler. Bu, web geli\u015ftiricilerine inan\u0131lmaz bir hassasiyet ve esneklik sunar.<\/p>\n
Zincirleme Kullan\u0131m<\/h4>\n
Birden fazla ili\u015fkisel se\u00e7iciyi ve temel se\u00e7iciyi birle\u015ftirerek \u00e7ok spesifik hedefler olu\u015fturabiliriz.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n