Modern web uygulamalar\u0131 ve dinamik aray\u00fczler, geli\u015ftiricilerin CSS kodlar\u0131n\u0131 daha esnek, s\u00fcrd\u00fcr\u00fclebilir ve performansl\u0131 hale getirmesini gerektirir. Ancak geleneksel CSS se\u00e7icileriyle karma\u015f\u0131k DOM yap\u0131lar\u0131n\u0131 hedeflemek, kod tekrar\u0131n\u0131 art\u0131rabilir ve stil y\u00f6netimini zorla\u015ft\u0131rabilir. Peki, y\u00fczlerce hatta binlerce sat\u0131r CSS kodunu daha okunabilir, mod\u00fcler ve ak\u0131ll\u0131ca y\u00f6netmek m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte tam bu noktada, CSS ak\u0131ll\u0131 se\u00e7icileri ve s\u00f6zde elementler devreye girerek web tasar\u0131m\u0131na yeni bir boyut kazand\u0131r\u0131yor. Bu makale, sizi bu g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131n derinliklerine g\u00f6t\u00fcrerek, s\u0131f\u0131rdan ba\u015flayarak ileri d\u00fczey uygulamalara kadar her \u015feyi ad\u0131m ad\u0131m \u00f6\u011fretecektir.<\/p>\n
Web geli\u015ftirmede kar\u015f\u0131la\u015f\u0131lan en b\u00fcy\u00fck zorluklardan biri, HTML yap\u0131s\u0131 de\u011fi\u015ftik\u00e7e CSS’in de buna uyum sa\u011flamas\u0131n\u0131 sa\u011flamakt\u0131r. Manuel olarak her de\u011fi\u015fikli\u011fi g\u00fcncellemek hem zaman al\u0131c\u0131 hem de hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir. Bu nedenle, elementlerin \u00f6zelliklerine, konumlar\u0131na veya durumlar\u0131na g\u00f6re otomatik olarak stil uygulayabilen ak\u0131ll\u0131 se\u00e7iciler, geli\u015ftiriciler i\u00e7in vazge\u00e7ilmez bir hale gelmi\u015ftir. Ayn\u0131 \u015fekilde, HTML’de fiziksel olarak bulunmayan ancak g\u00f6rsel olarak sayfaya de\u011fer katacak \u00f6\u011feleri CSS \u00fczerinden yaratma yetene\u011fi sunan s\u00f6zde elementler de, aray\u00fcz tasar\u0131m\u0131nda yarat\u0131c\u0131l\u0131\u011f\u0131 ve verimlili\u011fi art\u0131r\u0131r. Bu teknoloji, sadece kod yazma \u015feklinizi de\u011fil, ayn\u0131 zamanda web sayfalar\u0131n\u0131z\u0131 nas\u0131l d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fcz\u00fc ve tasarlad\u0131\u011f\u0131n\u0131z\u0131 da d\u00f6n\u00fc\u015ft\u00fcrecektir.<\/p>\n
Bu makalede, \u00f6ncelikle CSS se\u00e7icilerin temel prensiplerini ve neden bu kadar \u00f6nemli olduklar\u0131n\u0131 inceleyece\u011fiz. Ard\u0131ndan, elementlerin farkl\u0131 durumlar\u0131na veya konumlar\u0131na g\u00f6re stil uygulamam\u0131z\u0131 sa\u011flayan s\u00f6zde s\u0131n\u0131flar\u0131 ayr\u0131nt\u0131l\u0131 \u00f6rneklerle ele alaca\u011f\u0131z. \u00dc\u00e7\u00fcnc\u00fc b\u00f6l\u00fcmde ise, HTML yap\u0131m\u0131zda bulunmayan ancak g\u00f6rsel olarak sayfam\u0131za anlam katan s\u00f6zde elementlerin nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ke\u015ffedece\u011fiz. \u0130leri d\u00fczey kombinasyonlar ve ger\u00e7ek d\u00fcnya senaryolar\u0131 ile bu ara\u00e7lar\u0131n projelerinizde ne gibi farklar yaratabilece\u011fini g\u00f6receksiniz. Son olarak, s\u0131k\u00e7a sorulan sorularla akl\u0131n\u0131zdaki t\u00fcm soru i\u015faretlerini giderece\u011fiz. Haz\u0131rsan\u0131z, modern web tasar\u0131m\u0131n\u0131n temellerini birlikte ke\u015ffetmeye ba\u015flayal\u0131m.<\/p>\n
CSS se\u00e7iciler, web sayfalar\u0131n\u0131zdaki belirli HTML elementlerini hedefleyerek onlara stil uygulaman\u0131z\u0131 sa\u011flayan temel yap\u0131 ta\u015flar\u0131d\u0131r. Geleneksel olarak, elementleri etiket adlar\u0131na ( Ak\u0131ll\u0131 se\u00e7icilerin ba\u015f\u0131nda Nitelik Se\u00e7iciler (Attribute Selectors)<\/strong> gelir. Bu se\u00e7iciler, HTML elementlerinin belirli niteliklerine (attribute) g\u00f6re stil uygulaman\u0131z\u0131 m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, bir input elementinin <\/code><\/p>\n Nitelik se\u00e7icilerin yan\u0131 s\u0131ra, elementler aras\u0131ndaki ili\u015fkileri hedeflememizi sa\u011flayan Birle\u015ftirici Se\u00e7iciler (Combinators)<\/strong> de ak\u0131ll\u0131 se\u00e7iciler aras\u0131nda \u00f6nemli bir yer tutar. Bunlar, elementlerin DOM a\u011fac\u0131ndaki hiyerar\u015fik veya karde\u015f ili\u015fkilerine g\u00f6re se\u00e7ilmesini sa\u011flar:<\/p>\n <\/code><\/p>\np<\/code>, div<\/code>), s\u0131n\u0131flar\u0131na (.button<\/code>) veya ID’lerine (#header<\/code>) g\u00f6re se\u00e7eriz. Ancak bu y\u00f6ntemler, \u00f6zellikle dinamik ve karma\u015f\u0131k aray\u00fczlerde yetersiz kalabilir. \u0130\u015fte bu noktada, “ak\u0131ll\u0131 se\u00e7iciler” olarak adland\u0131rd\u0131\u011f\u0131m\u0131z daha geli\u015fmi\u015f ve g\u00fc\u00e7l\u00fc se\u00e7iciler devreye girer. Bu se\u00e7iciler, sadece etiket, s\u0131n\u0131f veya ID’ye ba\u011fl\u0131 kalmay\u0131p, elementlerin di\u011fer \u00f6zelliklerini, konumlar\u0131n\u0131 veya ili\u015fkilerini de baz alarak \u00e7ok daha hassas ve esnek hedefleme yapmam\u0131z\u0131 sa\u011flar.<\/p>\ntype=\"text\"<\/code> niteli\u011fine sahip olup olmad\u0131\u011f\u0131na bakabilir, veya bir linkin href<\/code> niteli\u011finde belirli bir kelime i\u00e7erip i\u00e7ermedi\u011fini kontrol edebilirsiniz. Bu sayede, ayn\u0131 etiketi veya s\u0131n\u0131f\u0131 payla\u015fan ancak farkl\u0131 niteliklere sahip elementlere \u00f6zel stiller atayabilirsiniz.<\/p>\n\n\/* type niteli\u011fi \"text\" olan t\u00fcm input'lara stil uygula *\/\ninput[type=\"text\"] {\n border: 1px solid #ccc;\n padding: 8px;\n}\n\n\/* href niteli\u011fi \"https\" ile ba\u015flayan t\u00fcm a etiketlerine stil uygula *\/\na[href^=\"https:\/\/\"] {\n color: green;\n}\n\n\/* class niteli\u011fi \"button\" ile biten t\u00fcm elementlere stil uygula *\/\n[class$=\"button\"] {\n cursor: pointer;\n}\n <\/pre>\n\n
div p<\/code>, div<\/code> i\u00e7indeki t\u00fcm p<\/code> elementlerini se\u00e7er.<\/li>\nul > li<\/code>, ul<\/code>'nin do\u011frudan alt\u0131ndaki li<\/code> elementlerini se\u00e7er.<\/li>\nh2 + p<\/code>, bir h2<\/code> elementinin hemen ard\u0131ndan gelen p<\/code> elementini se\u00e7er.<\/li>\nh2 ~ p<\/code>, bir h2<\/code> elementinin ard\u0131ndan gelen t\u00fcm p<\/code> elementlerini se\u00e7er.<\/li>\n<\/ul>\n\n\/* class'\u0131 \"container\" olan bir div'in i\u00e7indeki t\u00fcm p etiketlerini se\u00e7 *\/\n.container p {\n line-height: 1.6;\n}\n\n\/* class'\u0131 \"nav\" olan ul'nin do\u011frudan alt\u0131ndaki li'leri se\u00e7 *\/\n.nav > li {\n margin-right: 15px;\n}\n\n\/* Bir ba\u015fl\u0131\u011f\u0131n hemen alt\u0131ndaki ilk paragraf\u0131 stilize et *\/\nh3 + p {\n font-weight: bold;\n}\n\n\/* Bir div'in alt\u0131ndaki t\u00fcm p etiketlerini (ayn\u0131 seviyede) stilize et *\/\ndiv ~ p {\n margin-top: 1em;\n}\n <\/pre>\n