CSS seçicileri ile aynı anda birkaç öğe seçebilirsiniz. Bunları basit bir şekilde bir HTML öğesine tam olarak atamak istiyorsanız, kesin kodu iki kez yazmanız gerekmeyeceği için değerlidir.

CSS ile yeni başlıyorsanız, seçiciler hakkında bilgi edinmelisiniz. Css seçicileri için, nuanslarını keşfettikten sonra ne kadar iyi olduğu şaşırtıcıdır.

Kodlama uzmanı veya tam bir çaylak olup olmadığınıza göre, CSS seçicileri hile sayfasını öğrenmek, evrensel olarak senkronize edilmiş web siteleri tasarlamak için faydalı olacaktır. Bir seçici muhtemelen CSS'nin en önemli özelliğidir.

Stiller, kendileri tarafından başlatılan basamaklı bir sayfadaki öğelere bağlanır. CSS seçicilerini uygulamak, niteliklerini kullanarak çok sayıda öğeyi korumanızı ve yönetmenizi kolaylaştıracak ve size önemli miktarda manuel kodlama süresi kazandıracaktır.

İçerik Tabloları

1. kimlik seçici (#)
2. Element seçici
3. Sınıf seçici (.)
4. Seçiciler atfet
5. Descendant seçici
6. Çocuk seçici (kombinatör)
7. Başsavcısı ve genel kardeş seçicileri
8. Pseudo sınıfları
9. Psödo-elementler
10. Evrensel seçici (*)

CSS seçici nedir?

Genel olarak, CSS kural öğesi bir CSS seçici ile başlar. CSS özellik değerleri, CSS özellik değerlerini belirlemek için web sitesinin incelemesi gereken bir bileşen ve kavram deseni tanımlayarak HTML öğelerine yapıştırılmalıdır.

Bir seçici genellikle bir seti seçerek öğeleri seçer. CSS'de, CSS kodlamasının bir sonucu olarak şekillendirilecek unsuru belirlemek için seçiciler kullanılır. Adına, kategorisine, stiline, özelliğine vb. bağlı olarak bir CSS seçici kullanarak bir HTML öğesi seçilebilir.

Web sayfasının belirli öğeleri CSS seçicileri tarafından hedeflenebilir. Ayrıca, seçiciler bir web sitesinin ve bileşenlerinin nasıl şekillendirilmiş ve değiştirilmiş olmasında ayrılmaz bir rol oynarlar.

Mevcut CSS seçicileri çok geniş. Her ön uç geliştiricinin çalışmalarını düzene sokacak en popüler olanlardan birkaçlarına bir bakalım.

1. kimlik seçici (#)

CSS'nin önemli yoğun seçimi olan kimlik seçicisidir. Bir HTML öğesinin kimlik öznite değerine göre, kimlik seçicisi bu öğeyi seçer.

Teslimi verilen ve hatta id tarafından hedef alınabilecek seçilmiş bir kimlikle her öğeye stil vermenizi sağlayan size izin verir. Sadece, benzersiz bir kimliği olan bir öğeyi seçmek için kimlik adı eşliğinde # hash sembol'i kullanın.

Örnek:

Bu örnekte, CSS seçicisi #headerve seçilen elemana uygulanan özelliklerdir background-color: blue; color: white; padding: 10px;. . Bu CSS, HTML öğesi ile şekil ile seçer. headerve belirtilen stilleri uygulayın.

#header {
    background-color: blue;
    color: white;
    padding: 10px;
}

The id of the of the element headerMavi bir arka plan, beyaz metin ve 10 piksel dolguya sahip olurdu.

<div id="header">
    <h1> Maximize your application's performance with Atatus </h1>
</div>

Kıta seçici, stili seçilmiş bir kimlikle belirtilen tüm öğelere uygulamanızı isteyen kimlik seçicisidir. Benzersizliğini göz önünde bulunduran, bu seçiciyi uygulamak jenerik gibi görünüyor; Bununla birlikte, kimliğin web tarayıcının her yerinde farklı olmayı planladığını düşünün.

Sonuç olarak, sınıfları ve daha soyutlanmış mantığın kullanılması, büyük bir #ids sayısı oluşturmak için tercih edilir.

2. Element seçici

En göze çarpan CSS seçicileri arasında eleman seçiciler vardır. Bu, bir sınıfın veya kimliğin mantıksal operatörleri olmadan bir öğeyi vurgulamak için bir HTML etiketi yerleştirmek için modern bir terim.

Hangi öğelerin aynı elemanlı bir ada sahip olduğunu tespit etmek ve stilleri her birine entegre etmek için eleman seçiciyi kullanabilirsiniz.

Bununla birlikte, en derin CSS seçicilerinden biri olarak hizmet eder. Grup öğeleri için grup seçiciyi de kullanabilirsiniz. Bu, farklı sınıflar için nispeten benzer konfigürasyonları çoğaltma gerekliliğini ortadan kaldırmayı ortadan kaldırmayı ortadan kaldırmayı.

Senktezgi

element_name {
    // CSS Property
}

CSS'de bir eleman seçicinin kullanılmasının bir örneği şunlar olacaktır:

p {
    font-size: 16px;
    color: blue;
    text-align: justify;
}

Bu örnekte, CSS seçicisi "p" ve seçilen öğeye uygulanan özellikler "font-boyun boyutu: 16px; renk: mavi; metin hizalı: haklı;". Bu CSS tümleri seçerdi <p>HTML belgesinde öğeler ve belirtilen stilleri uygulayın.

<body>
   <p> Application performance monitoring </p>
   <p> Synthetic monitoring </p>
   <p> Real user monitoring </p>
</body>

Bu örnekte, her şeyin hepsi <p>HTML belgesindeki öğeler 16px, renkli mavi ve haklı metne uyum içinde font boyutuna sahip olacaktır.

3. sınıf seçici (.)

Belirtilen sınıf özniteliliğe sahip olan tüm öğeler sınıf seçici tarafından şekillendirilebilir. Kimlik seçicinin yana getirilmesinde, sayfadaki sayısız unsuru hedeflemenizi sağlar.

Bir sınıfı vurgulamak istiyorsanız, bir dönem (.) önce sınıf adını oluşturun. Bununla birlikte, bir sınıfın uygun olduğu HTML öğelerini sınırlamak mümkün.

Sınıf seçici, aynı anda birden fazla öğeyi şekillendirmenizi ve her HTML öğesinin görünümünü değiştirmenizi sağlar ve bu da nispeten duyarlı hale getirir.

Belirli bir sınıf niteliğine özel bir sınıf özelliği ile belirlemek, sınıf seçicinin başaran şeydir. Tanımlanmış sınıf adı ile en az bir unsur varsa stil uygulanır.

Senktezgi

.class_name {
    // CSS Property
}

Örnek CSS kodu:

.highlight {
    background-color: yellow;
    font-weight: bold;
}

Bu örnekte, CSS seçicisi .highlightve seçilen elemana uygulanan özelliklerdir background-color: yellow; font-weight: bold;. . Bu CSS sınıfla tüm öğeleri seçmiştir. highlightHTML belgesinde belirtilen stille uygulayın.

HTML kodu :

<p class="highlight"> Logs monitoring </p>
<span class="highlight"> API analytics </span>

Bu örnekte, her ikisi de <p>ve <span>Sınıfta "vurgu" olan elementler sarı bir arka plana ve cesur bir yazı tipine sahip olacaktır.

Bir sınıf seçicinin bir tarafından tanımlandığına dikkat edin .Sınıf adı ve birden fazla sınıf uzayla ayrılmış tek bir HTML öğesine eklenebilir.

<p class="highlight important"> Atatus captures and tracks errors and exceptions, providing you with detailed information on the cause and impact of each issue. </p>

Ve CSS'de, onlara iletişim ile katılarak birden fazla sınıfı seçebilirsiniz,

.highlight, .important {
    background-color: yellow;
    font-weight: bold;
}

4. Seçicileri atfet

Belirli bir öznitelinin adı veya değerine göre tüm öğeler, bir CSS öznitelik seçici kullanılarak bir kerede seçilebilir ve şekillendirilebilir. Tüm öğeler, belirli bir öznitesinin adı veya değerine göre uygundur ve hepsini bir CSS öznitelik seçici kullanarak dolaylı olarak şekillendirin.

Bir web öğesinin davranışı, belirli talimatlar vermek için öznitelikler kullanılarak değiştirilebilir. Ek olarak, öğeleri JavaScript veya CSS aracılığıyla manipüle etmek için bize daha fazla güç veriyorlar ve onlarla nasıl oynanacakları için daha fazla seçenek.

CSS atıf seçicileri aşağıdaki şekilde kullanılmıştır:

img[alt] {
    border: 2px solid green;
}

Yukarıdaki örnekteki CSS seçicisi img[alt]ve seçilen elemana uygulanan mülktir border: 2px solid green;. . Bu CSS tümleri seçerdi <img>HTML belgesinde "alt" özelliğine sahip olan ve belirtilen stili de uygulanmış olan öğeler.

<img src="atatus-logo.jpg" alt="image1">
<img src="apm.jpg" alt="image2">
<img src="rum.jpg">

İşte, ilk ikisi <img>Bir elemente sahip olan elementler altözelliğin bir tane olurdu 2pxYeşil sınır. Sonuncusuncu <img>elementi bir şey değildir altBir nitelik, bu yüzden yeşil bir sınırı olmazdı.

Bu basit bir örnektir, ancak niteliklerinin değerine veya belirli niteliklerin varlığına göre öğeleri seçmek için atıf seçicileri kullanabilirsiniz ve belirli bir öznitelik değerine göre belirli bir öğeyi seçmek için kullanabilirsiniz.

5. Descendant seçici

Belirli bir elementin soyu olan her unsur, soyunaklı seçici ile eşleştirildiğinden. Stilin birkaç bireysel öğeye atfedilmelidir, bu inanılmaz derecede faydalı olacaktır.

"Descendant" terimi, DOM ağacının herhangi bir yerinde yuvalandırıldığını gösterir. Doğrudan bir çocuk ya da beş seviyeden daha derin olsun, bir soyun olarak kabul edilir.

CSS kombinasyon seçicilerinin ailesinin ilki gerçekten soyunaklı seçicidir. Belirli bir unsura çocuk olan stil öğelerini size verir.

İkinci seçici ile eşleşen öğeler, ilk seçiciye en iyi uyan bir as atıcı öğesi olduğundan seçilir. Torun kombinatörler, soyundan gelen seçiciler tarafından ıslenerek üremiştir.

div p {
    font-size: 14px;
    color: red;
}

Bu örnekte, CSS seçicisi div pve seçilen elemana uygulanan özelliklerdir font-size: 14px; color: red;. . Bu CSS tümleri seçerdi <p>Birin soyunun soyunan unsurlar <div>HTML belgesinde elemanlar ve belirtilen stilleri uygulayın.

<div>
    <p>This is a paragraph inside a div.</p>
    <p>This is another paragraph inside a div.</p>
    <span>This is a span inside a div.</span>
    <div>
        <p>This is a paragraph inside a nested div.</p>
    </div>
</div>

Bu örnekte, ilk ikisi <p>Doğrudan soyu olan elementler <div>elementlerin bir tanesi olurdu font-size of 14pxve kırmızı bir renk. The (s.a. şey <span>element ve the element <p>Yuvanın içindeki element <div>Bu CSS seçici tarafından seçilmek için seçilmemiştir, bu nedenle belirtilen stilleri onlara uygulanmazdı.

Torun seçici, yuvaların ne kadar derin olduğuna bakılmaksızın, bir elementin belirli çocuklarını seçmeye izin veren, diğer öğelerin içine yuvaların içine yuvalı olan öğeleri seçmenin bir yoludur.

Senktezgi

selector1 selector2 {  
  /* property declarations */  
}  

6. Çocuk seçici (kombinatör)

Çocuk seçici, CSS soyunman seçici ile önemli ölçüde karşılaştıran bir CSS seçicisidir. Belirli bir öğenin çocuk olan tüm öğeler çocuk seçici ile seçilebilir.

İkinci elementin, bu seçicinin işlevsel olması için ilk elementin bir çocuğu olması gerekir. Kombinasyon seçici ailesi de çocuk seçiciyi kapsar. Basitçe, belirli bir öğenin çocuğu olarak hizmet eden her öğeye stil seçmenize ve uygulamanıza izin verir.

Diyelim göre, içinde birkaç öğe ve bu öğelerin içindeki yeni <ol> öğeler olan bir <ul> varsa, sadece bu öğeler için, belki de belirli bir stil seçmeyi planlasınız.

Senktezgi

element > element {  
   /*style properties*/  
}  

CSS kodu :

div > p {
    font-size: 14px;
    color: red;
}

Bu örnekte, CSS seçicisi "div > p" ve seçilen öğeye uygulanan özellikler "font-boy boyutu: 14px; renk: kırmızı;". Bu CSS tümleri seçerdi <p>Birin doğrudan çocukları olan unsurlar <div>HTML belgesinde elemanlar ve belirtilen stilleri uygulayın.

<div>
    <p>Real-time monitoring of application performance</p>
    <p>Error and exception tracking.</p>
    <span>Performance metrics.</span>
    <div>
        <p>Supports integration.</p>
    </div>
</div>

Bu örnekte, ilk ikisi <p>Doğrudan çocukların olan unsurlar <div>Element, 14px ve kırmızı bir renk olan bir font boyutuna sahip olacaktır. The (s.) <span>element ve the element <p>Yuvanın içindeki element <div>Bu CSS seçici tarafından seçilmek için seçilmemiştir, bu nedenle belirtilen stilleri onlara uygulanmazdı.

7. Başlı ve genel kardeş seçiciler

CSS bitişişik kardeş seçici, CSS seçicilerinin bir sonraki seçicisi olacaktır. Bu seçici, diğer özel öğeleri doğrudan takip etmek için gereken bir öğeyi seçmenizi sağlar. Sadece daha sonra takip edilecek unsur dikkate alınır; diğer tüm element dizileri tutulur.

Elementin “içinle” değil, “seçme” olması gerektiği unutulmamalıdır. Birbirlerine bir sonraki elemanlar şekillendirildiğinde, bitişişik kardeş seçicisi verimlidir. Bir artı sembolü (+), bitişişik kardeş seçiciyi belirler.

Senktezgi

element + element {  
   /*style properties*/  
}  

Yüz Yüzetilen Seçici Örneği:

<div class="container">
    <h1>Atatus</h1>
    <p>Application performance monitoring</p>
    <p>Real user monitoring</p>
</div>

.container h1 + p {
    color: blue;
}

Bu örnekte, yukarıdaki CSS kodu, konteyner div içindeki "h1" öğesini hemen takip edecek olan ilk "p" öğesini seçecektir. Ve seçilen elementin rengi mavi olacak.

CSS'deki bitişiğindeki kardeş seçicinin basitleştirilmiş bir varyantı genellikle genel kardeş seçici olarak kabul edilir. Bire nispeten bağlı olmadıkları gerçeğine rağmen, belirtilen elemanın kardeşleri olan tüm öğeleri seçebilirsiniz.

Genel kardeş kombinatör kullanmayı düşünüyorsanız, ilk karakteri ve ilki takip etmek zorunda olan ikinci öğeyi dahil etmeden önce ilk öğeyi belirtmelisiniz.

Senktezgi

element ~ element {  
   /*style properties*/  
}  

Genel Kardeş Seçici Örneği:

<div class="container">
    <h1>Benefits of Atatus</h1>
    <p>Error and exception tracking</p>
    <p>Root cause analysis</p>
    <p>Performance metrics</p>
    <p>Real-time monitoring of application performance</p>
</div>

.container h1 ~ p {
    color: blue;
}

Bu örnekte, yukarıdaki CSS kodu, konteyner div içindeki "h1" öğesini takip edecek tüm "p" öğelerini seçecektir. Ve seçilen elementin rengi mavi olacak.

Bu seçicilerin yalnızca aynı ebeveyn unsurlarını paylaşacak unsurlarla çalıştığını belirtmek önemlidir.

8. Pseudo sınıfları

Bir elementin farklı durumu bir pseudo sınıfı (:) ile belirtilmiştir. Bir elemanın durumuna göre, bir kullanıcı üzerine fareler, bir bağlantıya tıkladığında veya tıkladığında şekillendirilebilir.

"Psösüya sınıfları" terimi, belirtilen öğelerin durumuna göre stilleri tanımlamayı içerir. Bir kullanıcı tarafından ziyaret edildiğinde ve ziyaret edilmediğinde veya bir bağlantı tıklandığında ve bir öğenin odaklanmayı yakaladığında bir öğeyi şekillendirmek için kullanılabilir.

Bu "sölü sınıflar" oldukça etkileşimli kullanıcı arayüzleri tasarlayatabiliyor. Geliştirme ekipleri, basitliği ve kullanım kolaylığı nedeniyle genel kullanıcı deneyimini geliştirmek için bu sahte sınıfları benimsemelidir.

Bu, "hoover" veya "resmize edilmiş" veya başka herhangi bir kullanıcı odaklı duruma benzer. Bir onay kutusu veya radyo düğmesi gibi bir eleman kontrol edilmedikçe, bu sahte sınıf sadece bu öğeyi hedefleyecektir. Çekireç onların üzerinde gezindiğinde araç uçlarını vurgula eden sahte sınıflar eklenebilir.

İşte yaygın olarak kullanılan sahte sınıfların birkaç örneği:

a.) :hover - kullanıcı bir fare ile üzerine çıktığında bir eleman seçer.

a:hover {
    color: blue;
    text-decoration: underline;
}

Burada, kullanıcı "a" öğenin üzerinde gezindiğinde, metin rengi maviye dönüşecek ve metne bir alt satır eklenecek.

b.) :aktif - kullanıcı tarafından etkinleştirilirken bir öğeyi seçer, örneğin bir düğme tıklandığında.

button:active {
    background-color: blue;
}

Burada, düğme tıklandığında, düğmenin arka plan rengi maviye değişecektir.

c.) :focus - bir kullanıcının bir form giriş alanına tıklaması gibi odak noktası olduğunda bir öğe seçer.

input:focus {
    border: 2px solid blue;
}

Burada giriş alanı seçildiğinde giriş alanına 2px mavi bir sınır eklenecek.

d.) : ziyaret edildi - kullanıcı tarafından ziyaret edildiği bir unsuru seçer.

a:visited {
    color: purple;
}

Burada kullanıcı bağlantıyı ziyaret ettiğinde metnin rengi mora dönüşecek.

Bunlar, CSS'de bulunan birçok sahte sınıfın sadece birkaç örneğidir. Bir öğenin farklı durumları için daha spesifik stilller oluşturmak için diğer seçicilerle birleştirilebilirler.

9. Psödo-elementler

Bir psödo elemanı, stili belirli bir öğeye veya bir öğenin parçasına uygulamanıza izin verir. Pseudo-element'den önce bir (::) karakterden önce, bir (:):) karakterden önce, sahte sınıflar ile çelişiyor.

Psödo-element seçicileri, bir öğenin belirli bir bölümünü şekillendirmek için kullanılır; bunları yeni içerik eklemek veya içeriğin belirli bir bölümünün görünümünü değiştirmek için kullanabilirsiniz.

Diyelim göre, bir öğenin ilk harfi veya satırı şekillendirmek için ima edilebilir. Ayrıca, bir paragrafın ilk satırının yazı tipini değiştirmek için CSS sınıflarıyla da birleştirilebilir. Ek olarak, seçilen öğeden önce veya sonra yeni içerik eklemek için psödo-elementler kullanabilirsiniz.

İşte yaygın olarak kullanılan sahte unsurların birkaç örneği:

a.):: daha önce - bir öğenin önüne içerik eklemenizi sağlar.

p::before {
    content: "Read this: ";
}

Burada, "Bunu okuyun: "Her "p" öğesinden önce eklenecek.

b.) :: sonra - bir elementten sonra içerik eklemenizi sağlar.

p::after {
    content: " (End of text)";
}

Burada, " (metin ucu)" metni her "p" öğesinden sonra eklenecek.

c.) ::: birinci harf - bir öğenin ilk harf harfi stilinizi size izin verir.

p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: red;
}

Burada, her "p" öğesinin ilk harfi 2em, cesur ve kırmızı renkte bir font boyutuna sahip olacak.

d.) :: birinci satır - bir elementin ilk satırı şekillendirmenizi sağlar.

p::first-line {
    font-style: italic;
}

İşte, her birinin ilk satırı pElement itale olarak olacak.

Bazı sahte unsurların bazı eski tarayıcı sürümleri tarafından desteklenmedi, bu nedenle bunları kullanmadan önce tarayıcı uyumluluğunu her zaman kontrol etmelisiniz.

Bu sahte unsurları diğer seçicilerle birlikte daha spesifik stilller oluşturmak ve özel CSS efektleri oluşturmak için kullanabilirsiniz.

10. Evrensel seçici (*)

CSS'deki evrensel seçici, aterisk (*) sembolü ile temsil edilir. Bir sayfadaki tüm öğeleri, türleri, sınıfları veya kimlikleri ne olursa olsun seçer. Bu, evrensel seçici kullanılarak beyan edilirken ilan eden CSS stillerinin sayfadaki tüm öğelere uygulanacağı anlamına gelir.

Örneğin, başlıklar, paragraflar, bağlantılar ve görüntüler gibi birkaç farklı öğe türü olan bir web sayfasına sahip olduğunuzu varsayalım. Tüm bu unsurlara belirli bir yazı tipi aile uygulamak istiyorsanız, evrensel seçiciyi şöyle kullanabilirsiniz:

* {
  font-family: Arial, sans-serif;
}

Bu CSS kuralı, Arial yazı tipi aileyi başlıklar, paragraflar, bağlantılar ve resimler dahil olmak üzere sayfadaki tüm öğelere uygulayacaktır.

Başka bir örnek, sayfadaki tüm öğeler için varsayılan bir dolgu ayarlamak istediğinizi söyleyelim, evrensel seçiciyi şöyle kullanabilirsiniz:

* {
  padding: 10px;
}

Bu, sayfadaki tüm öğeler için varsayılan bir 10px dolgusunun ayarlı olacağını belirleyecek.

Evrensel seçicinin kullanımının tüm öğeleri seçtiği için sitenizde bir performans etkisine sahip olduğunu belirtmek önemlidir, bu nedenle dikkatli ve yalnızca gerektiğinde kullanılması en iyisidir.

Ve bazı durumlarda, belirli öğeleri hedeflemek için daha spesifik olması ve sınıf veya kimlik seçicileri kullanması önerilir.

CSS seçicileri, element adlarına, kimliklerine, sınıflarına, özelliklerine ve diğer özelliklerine bağlı olarak HTML öğelerini seçmek için uygulanır. HTML belgelerinin düzen ve sunumunu kontrol etmek için web tasarımcıları ve geliştiriciler tarafından kullanılan güçlü araçlar.

CSS seçicileri inanılmaz derecede çok yönlü ve güçlüdür ve web geliştiricilerinin HTML öğelerinin nasıl görüntülendiğine kesin olarak kontrol etmelerini sağlar. CSS seçicileri, diğer unsurlarla olan ilişkilerine dayalı öğeleri hedeflemek için de kullanılır ve geliştiricilerin tüm HTML öğeleri gruplarını bir kerede hedeflemelerine izin verir.

Bu, web geliştiricilerinin her bir öğeyi tek tek manuel olarak değiştirmek yerine, tek bir kod satırında küresel değişiklikler kaydetmelerine olanak tanır. Web geliştiricileri, CSS seçicileri kullanarak bir web sitesinin görünümünü ve hissörlenmesini kolayca özelleştirebilir.

Kaynak

• https://www.atatus.com/blog/powerful-css-selectors/