CSS Sözde Sınıfları İçin Kesin Rehber
Acemi veya deneyimli bir CSS geliştiricisi olun, muhtemelen duymuşsunuzdur sözde sınıflar. En iyi bilinen sözde sınıf muhtemelen : hover, bu, ne zaman bir elementi şekillendirmemize izin verir? durgun halde, yani, fare gibi bir işaretçi cihazı işaret ettiğinde.
Marj konusundaki önceki yayınlarımızın konseptini takiben: auto ve CSS Floats, bu yazıdaki sözde sınıflara daha yakından bakacağız. Göreceğiz sözde sınıflar gerçekte ne, nasıl çalıştıklarını, nasıl kategorize edebileceğimizi ve sahte unsurlardan nasıl farklı oldukları.
Sözde Sınıflar Nedir??
Bir sözde sınıf CSS seçicilere ekleyebileceğimiz bir anahtar kelimedir. özel bir durum tanımla ait HTML öğesinin. CSS seçiciye bir sözde sınıf ekleyebiliriz. kolon sözdizimi : bunun gibi: a: hover …
Bir CSS sınıfı, üst menü öğeleri veya kenar çubuğu widget'larının başlıkları gibi aynı stil kurallarını uygulamak istediğimiz HTML öğelerine ekleyebileceğimiz bir niteliktir. Başka bir deyişle, CSS sınıflarını HTML öğelerini gruplandırma veya sınıflandırma bu bir şekilde veya diğer benzer.
Sözde sınıfları da aynı şekilde oldukları için onlara benzer. aynı özelliği paylaşan öğelere stil kuralları eklemek için kullanılır.
Ancak gerçek sınıflar Kullanıcı tanımlı ve kaynak kodunda görülebilir, Örneğin normal CSS derslerinin işi etmektir öğeleri sınıflandırmak veya gruplandırmak. Geliştiriciler öğelerinin nasıl gruplandırılacağını bilirler: gruplandırmak için "menü öğeleri", "düğmeler", "küçük resimler" vb. Gibi sınıflar oluşturabilir ve daha sonra benzer öğeleri stillendirebilirler. Bu sınıflandırmalar elementlerin özelliklerine dayanmaktadır. geliştiricilerin kendileri tarafından verilen. Örneğin, bir geliştirici kullanmaya karar verirse HTML öğeleri ancak kendi ortak özellikleri durumlarına, konumlarına, doğalarına ve sayfa ve kullanıcı ile etkileşimlerine göre. Bunlar, özellikleri değil genellikle HTML kodunda işaretlidir, ama yapabiliriz onları sahte sınıflarla hedefleyin CSS’de, örneğin: Bunlar, genellikle sahte sınıflar tarafından hedeflenen özelliklerdir. Sınıflar ve sözde sınıflar arasındaki farkı daha iyi anlamak için, sınıfı kullandığımızı varsayalım. Bu son alt öğeleri aşağıdaki CSS ile biçimlendirebiliriz: Fakat son unsur değiştiğinde ne olur? Eh, taşımak zorunda kalacağız Bu güçlük güncelleme sınıfları kullanıcı aracısına bırakılabilir, en azından elemanlar arasında ortak olan özellikler için (ve son eleman olmak, olabildiğince yaygındır). sahip olan önceden tanımlanmış Pek çok sözde sınıf vardır, hepsi bize erişilemez veya erişilmesi zor olan özelliklerine dayanarak unsurları hedeflemenin yollarını sunar. İşte MDN'deki standart sözde sınıfların listesi. HTML öğelerine dinamik sözde sınıflar eklenir ve kaldırılır dinamik, geçiş yaptıkları duruma göre kullanıcının etkileşimlerine cevap olarak. Dinamik sözde sınıflardan bazı örnekler: Durum temelli sözde sınıflar, öğelere oldukları zaman eklenir. belirli bir statik durumda. En iyi bilinen örneklerinden bazıları: En popüler devlet temelli sözde sınıf olmalı Yapısal sözde sınıfları, öğeleri temel alarak sınıflandırır. Belge yapısındaki konumlarında. En yaygın örnekleri Ayrıca, sınıflandırılması zor olan çeşitli sahte sınıflar da vardır: Sahte sınıflar hakkında en zor şeylerden biri muhtemelen arasındaki farkı anlamaktır. Her ikisi de yapısal sözde sınıflardır ve Ana öğenin içindeki belirli bir öğe (konteyner), ancak farklı bir şekilde. üstlenmek n 2, sonra Bir örneğe bakalım. Bu kısa CSS'nin HTML'yi iki farklı durumda nasıl stillendirdiğini görelim.. Durum 1'de, ikinci eleman bir Fakat eğer ana eleman yapar ikinci bir paragraf var Örneğimizde Paragraf 1, Çocuk 1 Paragraf 2, Çocuk 3 İkinci durumda, sıralanmamış listeyi üçüncü sıraya taşırız ve ikinci paragraf ondan önce gelir. Bu her ikisi de anlamına gelir Paragraf 1, Çocuk 1 Paragraf 2, Çocuk 2 Arasındaki farklar hakkında daha fazla okumak istiyorsanız Sözde sınıflardan bahsettiğimiz zaman, anlamak da önemlidir. sahte unsurlardan nasıl farklı oldukları, onları karıştırmamak için. Ancak sözde sınıfları kullanırken HTML öğelerini seçmek için belge ağacında var sadece ayrı olarak işaretlenmemiş, sözde elemanlar bizim normalde yok DOM’da ya hiç Bir de var sözdizimindeki fark. Sahte öğeler genellikle çift sütunla tanımlanır Bu, CSS2'de olduğu gibi bir karışıklığa yol açabilir, sözde elemanlar da tek bir kolonla işaretlendi - tarayıcılar sözde elemanlar için hala tek kolon sözdizimini kabul ediyor. Ayrıca sözde sınıflar ve sözde unsurlar arasında farklılıklar vardır. Onları CSS ile hedefleyebilme şeklimiz. Sözde elemanlar sadece görünebilir sonra seçicilerin dizisi iken, sahte sınıflar CSS seçicisindeki herhangi bir yere yerleştirilebilir. Örneğin, şöyle bir liste öğesinin son liste öğesini hedefleyebilirsiniz: VEYA Seçicinin ilk sırası, içindeki son çocuğu seçer. Sözde elemanlarla benzer bir şeyler yapmaya çalışalım. Yukarıdaki CSS kodu geçerlidir ve "kırmızı" metni görünecektir sonra Öte yandan, bu kod bizim sözde öğenin konumunu değiştiremez seçici sekansın içinde. Ayrıca, bir seçicinin yanında yalnızca bir sözde öğe görünebilir, oysa sözde sınıflar birbirleriyle birleştirilebilir eğer kombinasyon mantıklıysa. Örneğin, salt okunur olan ilk alt öğeleri hedef almak için sözde sınıfların bir birleşimini oluşturabiliriz Seçici bir kod ile Bunu bilmek önemlidir bunlar değil CSS sözde sınıfları jQuery tarafından hedef alınıyor. Onlar jQuery seçici uzantıları denir. jQuery seçici uzantıları size sağlar HTML öğelerini daha basit anahtar kelimelerle hedefleme. Bunların çoğu, tek bir anahtar kelimeyle temsil edilen birden fazla normal CSS seçicinin kombinasyonlarıdır.Sahte Sınıfların Amacı
.son Farklı ana konteynırlardaki son elemanları tanımlamak için.
li.last text-transform: büyük harf; option.last font-style: italic;
.son önceki son öğeden şimdiki öğeye kadar olan sınıfı.: Geçen-çocuk Sözde sınıf gerçekten çok faydalıdır. Bu şekilde, biz son elemanı belirtmek zorunda değilsin HTML kodunda, ancak bunları aşağıdaki CSS ile stillendirebiliriz: li: son çocuk text-transform: büyük harf; seçenek: son çocuk font-style: italic;
Ana Sahte Sınıflar
1. Dinamik Sözde Sınıfları
: hover, : odak, : bağlantı, ve :ziyaret, bunların tümü eklenebilir. bağlantı etiketi. a: ziyaret renk: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Devlet Tabanlı Sözde Sınıflar
:kontrol Bu onay kutuları için uygulanabilir):Tam ekran Tam ekran modunda görüntülenmekte olan herhangi bir öğeyi hedeflemek için: devre dışı örneğin, devre dışı bırakılmış modda olabilir , , ve . :kontrol, hangi bir onay kutusunun işaretli olup olmadığını işaretler. .onay kutusu: kontrol + etiket font-style: italic; giriş: devre dışı background-color: #EEEEEE;
3. Yapısal Sözde Sınıfları
:ilk çocuk, : Geçen-çocuk, ve : İnci-çocuk (n) - hepsi bir konteynırın içindeki belirli bir alt öğeyi hedefine göre hedeflemek için kullanılabilir - ve :kök DOM’daki en üst düzey ana öğeyi hedefleyen. 4. Çeşitli Sözde Sınıfları
: Değil (x) seçiciyle uyuşmayan öğeleri seçen x: Lang (dil-kodu) hangi içeriğin belirli bir dilde olduğunu seçen unsurlar: Dir (yönü) Belirli bir yönlülük içeriğine sahip elemanları seçen (soldan sağa veya sağdan sola). p: Lang (ko) arka plan rengi: # FFFF00; : root background-color: # FAEBD7;
n'inci-çocuk vs türün nth Sözde Sınıflar
: N'inci-çocuk ve : N-inci-tipi sözde sınıflar.: İnci-of-the child (n) olan bir öğeyi hedefler. ebeveyn öğesinin ikinci çocuğu, ve : N-inci-of-tipi (n) hedefler arasında ikinci aynı tip elemanın (paragraflar gibi) üst öğenin içinde. / * aynı zamanda ana öğesinde ikinci çocuk olan bir paragraf * / p: nth-child (2) color: # 1E90FF; // lightblue / * bir ana öğenin içindeki ikinci paragraf * / p: nth-of-type (2) font-weight: bold;
Dava 1
n'inci-çocuk (2) kural buna uygulanmaz. İkinci bir çocuk olmasına rağmen değil bir paragraf. n'inci-of-tipi (2) Kural geçerli olacaktır, çünkü bu kural yalnızca öğeler ve diğerlerini umursamıyor türleri ana öğenin içindeki öğelerin (sıralanmamış listeler gibi) listesi.n'inci-of-tipi (2) kural Çocuk 3 olan ikinci paragrafa göre olacaktır..
Sırasız Liste 1, Çocuk 2
Durum 2
: İnci-çocuk (2) ve : İnci-of-tipi (2) İkinci paragraf aynı zamanda ebeveyinin ikinci çocuğu olduğu için kurallar uygulanacaktır.
Sırasız Liste 1, Çocuk 3
: Nth-of-çocuk ve : N-inci-tipi sözde sınıfları, CSS Tricks harika bir yazı vardır. SASS kullanıyorsanız Family.scss, karmaşık bir içerik oluşturmanıza yardımcı olabilir. n'inci-çocuk'ified elemanları.Sahte Sınıflar vs Sahte Öğeler
Sözde elemanlar, gibi ::önce ve ::sonra (nasıl kullanılacağına dair bu öğreticiye bakın) kullanıcı aracıları tarafından eklendi, ve CSS ile hedeflenebilir ve stillendirilebilirler ayrıca, sözde sınıfları gibi. ::önce ve ::sonra) veya sadece mevcut elemanların belirli parçaları olarak (örneğin ::ilk harf veya :: tutucudur). ::, sözde sınıflar tek bir kolonla tanımlanırken :.1. CSS Seçici Dizisindeki Yerleri
ul>: last-child.red color: # B0171F;
ul> .red: son çocuk renk: # B0171F;
.kırmızı) ikincisi ise son çocuğu seçen unsurlar arasından seçer. .kırmızı sınıf içinde ul> .red :: after ekran: blok; içerik: 'kırmızı'; renk: # B0171F;
sınıftaki öğeler .kırmızı. ul> :: after.red display: block; içerik: 'kırmızı'; renk: # B0171F;
2. Seçici Dizideki Oluşum Sayısı
:ilk çocuk ve :Sadece oku Aşağıdaki şekilde: : birinci-çocuk: salt okunur color: #EEEEEE;
jQuery Selector Eklentileri
: Sözdizimi her zaman uygun bir CSS sözde sınıfı oluşturmaz. Eğer jQuery'yi daha önce kullandıysanız, seçicilerinin çoğunu kullanmış olabilirsiniz. : sözdizimi, örneğin $ ( 'Enkaz'), $ ( ': Giriş') ve $ ( ': Seçili'). / * Düğme, seçim ve giriş * / $ (": giriş") .css gibi girişle ilgili tüm HTML öğelerinin fontunu değiştirin.
