CSS seçiciler hedef öğede kullanılır, öğeyi gizler ve öğe özelliklerinin bir veya daha fazla HTML öğesini tanımlamasını bekler. İki ana CSS seçici türü, kimliğe veya sınıfa göre seçim yapmaktır. Bir HTML öğesinin, aşağıda gösterildiği gibi id niteliğini içermesi durumunda bir id'si vardır.
<span id="myidentifier">Example Text</span>
Seçmek için şöyle bir CSS seçici oluşturursunuz #myidentifier
Bir HTML öğesinin bir sınıfı varsa, bu örnekte gösterildiği gibi sınıf niteliğine sahip olacaktır.
<div> <span class="myclass">Example Text One</span> <span class="myclass">Example Text Two</span> <span class="myclass">Example Text Three</span> </div>
Seçmek için şöyle bir CSS seçici oluşturursunuz .myclass
Sınıfıyla belirli bir öğeyi seçmek istiyorsanız myclass
bu durumda bunu yapmak için standart bir CSS seçici kullanabilirsiniz. n'inci çocuk(2) böyle seçiciyi: .myclass:nth-child(2)
ikinci myclass aralığını seçmek için. Ancak bu yalnızca bu durumda işe yarayacaktır çünkü ana div öğesinin altında başka öğe yoktur. Örneğin ap öğesi olsaydı, n'inci çocuk dizinini değiştirirdi.
Bazen seçmeniz gereken bir HTML öğesinin, sayfa içinde benzersiz bir kimliği veya sınıfı olmayabilir. Bu HTML öğelerini seçerken daha karmaşık bir CSS seçici gerekir.
<div class="Header"> <a href="https://www.example.com/"> <div>...</div> </a> <div class="SearchBar">...</div> <div class="TagLine">...</div> </div>
Mesela yukarıdaki örnekte link içerisindeki DIV elemanını seçmek istiyoruz. Bunu yapmak için, benzersiz DIV'den aşağıya doğru çalışan bir CSS seçici belirtmemiz gerekir. Header
sınıf.
div.Header a div
CSS seçicileri web geliştirmenin standart bir özelliğidir. Bu makale iyi bir genel bakış sunmaktadır. CSS seçicileri nasıl kullanılır.
Bir CSS seçiciden birden fazla HTML öğesi döndürülürse ve hedef öğeyi kullanıyorsanız veya öğe özelliklerini bekliyorsanız yalnızca ilk eşleşen öğe kullanılır. Ancak, öğeyi gizle özelliğini kullanıyorsanız, eşleşen tüm HTML öğeleri gizlenir.
Farklı kimliklere veya sınıflara sahip birden fazla öğeyi gizlemek istiyorsanız, bunu her CSS seçiciyi virgülle ayırarak yapabilirsiniz. Örneğin yukarıdaki örnek sınıfı ve kimliği gizlemek için aşağıdakileri kullanırsınız: #myidentifier,.myclass