Gibi şeyler a:linkveya div::after...

Farkla ilgili bilgi kıt görünüyor.

CSS 3 seçici öneri ikisi hakkında oldukça açıktır, ama yine farklılıklarını göstermeye çalışacağım.

Sözde sınıflar

Resmi açıklama

Sözde sınıf kavramı, belge ağacının dışında kalan veya diğer basit seçiciler kullanılarak ifade edilemeyen bilgilere dayalı seçime izin vermek için tanıtılmıştır.

Bir sözde sınıf her zaman bir "kolon" ( :) ve ardından sözde sınıfın adı ve isteğe bağlı olarak parantezler arasındaki bir değerden oluşur.

Bir seçicide bulunan tüm basit seçici dizilerinde sözde sınıflara izin verilir. Sözde sınıflara, basit seçici dizilerinin her yerinde, baştaki tür seçiciden veya evrensel seçiciden sonra (muhtemelen atlanmıştır) izin verilir. Sözde sınıf isimleri büyük / küçük harf duyarlıdır. Bazı sözde sınıflar birbirini dışlar, diğerleri ise aynı öğeye aynı anda uygulanabilir. Sözde sınıflar, bir kullanıcı belgeyle etkileşim halindeyken bir öğenin bir sözde sınıfı elde etmesi veya kaybetmesi anlamında dinamik olabilir.

Kaynak

Ne anlama geliyor?

Sözde sınıfların önemli doğası ilk cümlede belirtilmiştir: "sözde sınıf kavramı [...] seçime izin verir " . Bir stil sayfasının yazarının, "belge ağacının dışında yer alan" bilgilere , örneğin bir bağlantının mevcut durumuna (:active , :visited) . Bunlar DOM içinde herhangi bir yere kaydedilmez ve bu seçeneklere erişmek için DOM arayüzü yoktur.

Öte yandan, :targetDOM manipülasyonu ile erişilebilir ( window.location.hashnesneyi JavaScript ile bulmak için kullanabilirsiniz ), ancak bu "diğer basit seçiciler kullanılarak ifade edilemez" .

Yani temelde bir sözde sınıf, basit seçicilerden oluşan bir dizideki diğer herhangi bir basit seçici gibi, seçilen öğeler kümesini rafine eder . Basit seçiciler dizisindeki tüm basit seçicilerin aynı anda değerlendirileceğini unutmayın. Sözde sınıfın tam listesi için CSS3 seçici önerisini kontrol edin.

Misal

Aşağıdaki örnek, tüm çift satırları gri ( #ccc), 5 beyaza bölünemeyen tüm düzensiz satırları ve diğer her satır macentayı renklendirecektir .

table tr:nth-child(2n) td{
   background-color: #ccc;
}

table tr:nth-child(2n+1) td{
   background-color: #fff;
}

table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

Sözde öğeler

Resmi açıklama

Sözde öğeler, belge dili tarafından belirtilenlerin ötesinde belge ağacı hakkında soyutlamalar oluşturur. Örneğin, belge dilleri, bir öğenin içeriğinin ilk harfine veya ilk satırına erişmek için mekanizmalar sunmaz. Sözde öğeler, yazarların bu aksi takdirde erişilemez bilgilere başvurmalarına izin verir. Sözde öğeler ayrıca yazarlara kaynak belgede bulunmayan içeriğe atıfta bulunmanın bir yolunu da sağlayabilir (örneğin, ::beforeve ::aftersözde öğeler oluşturulan içeriğe erişim sağlar).

Bir sözde eleman, iki virgülden ( ::) ve ardından sözde elemandan oluşur.

Bu ::gösterim, sözde sınıflar ve sözde elemanlar arasında bir ayrım oluşturmak için mevcut belge tarafından tanıtılmıştır. Mevcut stil sayfalarıyla uyumluluk için, kullanıcı aracılarının CSS düzey 1 ve 2'de tanıtılan sözde öğeler için önceki tek iki nokta gösterimini de kabul etmesi gerekir (yani: ilk satır,: ilk harf,: önce ve: sonra). Bu şartnamede sunulan yeni sözde elemanlar için bu uyumluluğa izin verilmez.

Seçici başına yalnızca bir sözde eleman görünebilir ve varsa, seçicinin öznelerini temsil eden basit seçiciler dizisinden sonra görünmesi gerekir.

Not: Bu spesifikasyonun gelecekteki bir sürümü, seçici başına birden çok sözde öğeye izin verebilir.

Kaynak

Ne anlama geliyor?

Buradaki en önemli kısım, "sözde öğelerin yazarların [..] aksi takdirde erişilemeyen bilgilere atıfta bulunmasına izin vermesi " ve "yazarlara kaynak belgede bulunmayan içeriğe atıfta bulunmanın bir yolunu da sunabilmesidir (ör. ::beforeve ::aftersözde öğeler oluşturulan içeriğe erişim sağlar). " En büyük fark, kuralların ve hatta sözde sınıf seçicilerin uygulanabileceği yeni bir sanal öğe oluşturmalarıdır. Öğeleri filtrelemezler, temelde içeriği filtrelerler ( ::first-line, ::first-letter) ve yazarın istediği gibi (yani neredeyse) biçimlendirebileceği sanal bir kapsayıcıya sararlar.

Örneğin ::first-linesözde eleman, kullanılan mevcut yazı tipine, yazı tipinin boyutuna, elemanların genişliğine, yüzen elemanlara (ve muhtemelen günün saatine) bağlı olduğundan, JavaScript ile yeniden oluşturulamaz. Pekala, bu tamamen doğru değil: Bir kişi yine de tüm bu değerleri hesaplayabilir ve ilk satırı çıkarabilir, ancak bunu yapmak çok külfetli bir faaliyettir.

Sanırım en büyük fark, "seçici başına yalnızca bir sözde eleman görünebilir" . Not, bunun değişebileceğini söylüyor, ancak 2012 itibariyle gelecekte farklı bir davranış göreceğimize inanmıyorum ( hala CSS4'te ).

Misal

Aşağıdaki örnek, sözde sınıfı :langve sözde öğeyi kullanarak belirli bir sayfadaki her alıntıya bir dil etiketi ekleyecektir ::after:

q:lang(de)::after{
    content: " (German) ";
}

q:lang(en)::after{
    content: " (English) ";
}

q:lang(fr)::after{
    content: " (French) ";
}

q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

TL; DR

Sözde sınıflar, bir seçici dizisinde basit seçiciler olarak hareket eder ve böylece sunum dışı özelliklerdeki öğeleri sınıflandırır, sözde öğeler yeni sanal öğeler oluşturur.

Referanslar

W3C

• Seçiciler Seviye 3
  • 4. Seçici sözdizimi
  • 6.6 Sözde sınıflar
  • 7. Sözde öğeler
• CSS 2.1 Spesifikasyonu (modası geçmiş ancak yine de bilgilendirici)
  • 5.2 Seçici sözdizimi :

    Basit bir seçici, bir tür seçici veya evrensel seçicidir ve hemen ardından herhangi bir sırayla sıfır veya daha fazla öznitelik seçicisi, kimlik seçicisi veya sözde sınıflar gelir. Basit seçici, tüm bileşenleri eşleşirse eşleşir.

  • 5.10 Sözde öğeler ve sözde sınıflar

Sözde sınıf, mevcut öğeleri filtreler.
a:linkTüm demektir <a>vardır s :link.

Sözde unsur, yeni bir sahte unsurdur. s'den
div::aftersonra var olmayan öğeler anlamına gelir <div>.

::selectionsözde öğenin başka bir örneğidir.
Seçilen tüm öğeler anlamına gelmez; bu, birden çok öğenin bölümlerini kapsayabilen seçilmiş içerik aralığı anlamına gelir.

Farkı anlamama yardımcı olan kısa açıklama:

• Sözde sınıflar özel bir durumu tanımlar.
• Sözde öğeler sanal öğelerle eşleşir.

Site noktası belgelerinden:

Bir sözde sınıfı HTML bir sınıfa benzer, ancak işaretlemesinde açıkça belirtilmiş değil. Bazı sözde sınıflar dinamiktir - belgeyle kullanıcı etkileşiminin bir sonucu olarak uygulanırlar. - http://reference.sitepoint.com/css/pseudoclasses . Bunlar gibi şeyler olurdu :hover, :active, :visited.

Sözde öğeler , belge ağacında açıkça bulunmayan sanal öğelerle eşleşir. Sözde öğeler, temsil ettikleri sanal öğeler, örneğin tarayıcı penceresinin genişliği değiştirildiğinde değişebildiği ölçüde dinamik olabilir. CSS kuralları tarafından oluşturulan içeriği de temsil edebilirler. - http://reference.sitepoint.com/css/pseudoelements . Bunlar gibi şeyler olurdu before, :after, :first-letter.

Basit cevap aşağıdadır:

Biz kullanmak sözde sınıfı biz dayalı css uygulamak gerektiğinde devletin bir elementin. Gibi:

1. Çapa öğesinin üzerine gelindiğinde css uygulayın ( :hover)
2. Bir html öğesine ( :focus) odaklandığında css uygulayın . vb.

Biz kullanmak sözde elemanı biz css uygulamak gerektiğinde belirli bölümlerine bir elemanları veya yeni bir eklenen içerik . Gibi:

1. Css'i bir elemanın ilk harfine veya ilk satırına uygulayın ( ::first-letter)
2. Bir öğenin ( ::before, ::after) içeriğinin önüne veya arkasına içerik ekleyin

Aşağıda her ikisinin de örneği:

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>

Kavramsal bir cevap:

• Sözde öğe, belgenin parçası olan şeylere atıfta bulunur, ancak siz bunu henüz bilmiyorsunuz. Örneğin ilk harf. Önceden sadece metin vardı. Artık hedefleyebileceğiniz bir ilk harfiniz var. Bu yeni bir kavram, ancak her zaman belgenin bir parçasıydı. Bu, aşağıdaki gibi şeyleri de içerir::before ; orada gerçek içerik olmasa da, başka bir şeyden önceki kavram her zaman oradaydı - şimdi onu belirliyorsunuz.

• Sözde sınıf, DOM'daki bir şeyin durumudur. Tıpkı bir sınıfın bir öğeyle ilişkilendirdiğiniz bir etiket olması gibi, sözde sınıf da tarayıcı veya DOM veya her neyse, genellikle durumdaki bir değişikliğe yanıt olarak ilişkilendirilen bir sınıftır. Bir kullanıcı bir bağlantıyı ziyaret ettiğinde - bu bağlantı 'ziyaret edilmiş' durumuna geçebilir. Tarayıcının 'ziyaret edilen' sınıfını Çapa öğesine uyguladığını hayal edebilirsiniz. :visitedo zaman bu sözde sınıf için nasıl seçeceğiniz olacaktır.

Sözde Sınıf

Sözde sınıf, ilke olarak HTML belge ağacının kendisine ve öğelerine veya ad, öznitelikler veya içerik gibi özelliklere değil, dil kodlaması veya dinamik durum gibi diğer hayali koşullara dayalı olarak bir HTML belgesinin belirli bölümlerini seçmenin bir yoludur. bir öğenin.

Orijinal sözde sınıf tanımlı dinamik durumları, zaman içinde veya kullanıcı müdahalesi yoluyla girilen ve çıkılan bir elemandır. BB2, sanal kavramsal belge bileşenlerini veya belge ağacının çıkarsanmış kısımlarını, örneğin birinci-alt öğesini içerecek şekilde bu kavramı genişletmiştir. Sözde sınıflar, çeşitli öğelere hayalet sınıflar eklenmiş gibi çalışır.

KISITLAMALAR: Sözde öğelerin aksine, sözde sınıflar seçici zincirinin herhangi bir yerinde görünebilir.

Örnek sözde sınıf kodu:

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

Yukarıdaki sözde sınıf kodun oluşturulmasını gösteren bir sayfa

Sözde öğeler

PSEUDO-ELEMENTS, öğelerin alt bölümlerini ele almak için kullanılır. Belgelerde belirtilenin ötesinde bir öğenin içeriğinin bir kısmında stil belirlemenize olanak tanırlar. Başka bir deyişle, aslında belge öğesi ağacında olmayan mantıksal öğelerin tanımlanmasına izin verirler. Mantıksal öğeler, ima edilen anlamsal yapının CSS seçicilerinde ele alınmasına izin verir.

KISITLAMALAR: Sözde öğeler yalnızca harici ve belge düzeyindeki bağlamlara uygulanabilir - satır içi stillere uygulanamaz. Sözde öğeler, bir kuralda görünebilecekleri yerlerde sınırlandırılmıştır. Yalnızca bir seçici zincirinin sonunda görünebilirler (seçicinin konusundan sonra). Seçicide bulunan herhangi bir sınıf veya kimlik adından sonra gelmelidirler. Her seçici için yalnızca bir sözde öğe belirtilebilir. Tek bir eleman yapısındaki birden çok sözde elemanı ele almak için, birden çok stil seçici / beyan ifadeleri yapılmalıdır.

Sözde öğeler, ilk büyük harfler ve küçük harfler gibi yaygın tipografik efektler için kullanılabilir. Ayrıca, kaynak belgede olmayan ("önce" ve "sonra" ile) oluşturulmuş içeriği de ele alabilirler ("önce" ve "sonra" ile) Özellikler ve değerler eklenen bazı sözde öğelerin örnek bir stil sayfası aşağıdadır.

/ * Aşağıdaki kural, başlık 1'in ilk harfini seçer ve yazı tipini el yazısı ile yeşil bir arka plana sahip 2em olarak ayarlar. İlk harf, blok düzeyindeki bir öğe için oluşturulan ilk harfi / karakteri seçer. * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

Kaynaklar: Bağlantı

Kısaca, MDN'deki Sözde sınıflardan :

Bir CSS sözde sınıfı , seçilen öğelerin özel bir durumunu belirten bir seçiciye eklenen bir anahtar sözcüktür. Örneğin :hover , kullanıcı bir düğmenin üzerine geldiğinde bir stil uygulamak için kullanılabilir.

div: hover {
  arka plan rengi: # F89B4D;
}

Ve MDN'deki Sözde öğelerden :

CSS sözde öğesi , seçiciye eklenen ve seçilen öğelerin belirli bir bölümünü biçimlendirmenize olanak tanıyan bir anahtar sözcüktür. Örneğin, ::first-linebir paragrafın ilk satırına stil vermek için kullanılabilir.

/ * Her <p> öğesinin ilk satırı. * /
p :: first-line {
 renk: mavi;
 metin dönüşümü: büyük harf;
}