Altın Konu CSS Sözde Sınıfları ve Sözde Öğeleri - Kullanmaya Başlarken

Replicant · 10 Eki 2021

Getting-started-with-pseudo-classes-and-pseudo-elements----featured.png

Bir web sayfasındaki öğeleri hedeflemek ve stil vermek için CSS seçicilerini kullanabilirsiniz. Standart bir seçici, belirli bir paragrafı veya belirli bir düzeydeki tüm başlıkları hedefleyebilir. Sözde seçiciler, işleri bir adım öteye taşıyarak sayfanın bölümlerini daha nüansla hedeflemenize olanak tanır.

Sözde sınıflar, bir öğenin farklı durumlarını hedefler: örneğin, işaretçi bir bağlantının üzerine geldiğinde. Sözde öğeler, bir paragrafın ilk satırı gibi bir öğenin belirli bir bölümünü hedeflemenize olanak tanır.

O halde lafı daha fazla uzatmadan sözde sınıfların ve sözde öğelerin temellerini açıklayalım.

Sözde Sınıf Nedir?

Sözde sınıf, HTML öğelerini belirli bir durumda seçen bir CSS seçicisidir. Bazı durumlar, türünün ilk öğesi gibi bağlama atıfta bulunur. Diğerleri, örneğin fare işaretçisi tarafından bir bağlantının üzerine gelindiğinde olduğu gibi davranışsaldır. İçeriği bir kullanıcının eylemlerine göre şekillendirmenize izin verir. Özellikle bağlamsal durumlar, esnek, bakımı kolay ve temiz kod yazmanıza yardımcı olur. Davranışsal durumlar, aksi takdirde JavaScript kullanmanız gerekebilecek işlevsellik için bir kısayol sunar.

Sözde sınıfları iki nokta üst üste ( : ) ile başladıklarından kolayca tanıyabilirsiniz . Birkaç basit ve kullanıcı eylemi sözde sınıf örneğini görelim.

Basit Sözde Sınıf Örneği

İlk olarak HTML kodunu yazalım.

Kod:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>Pseudo-class and Pseudo-element</title>
 </head>
 <body>
   <header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>
   
   <section>
    <p>
       Voluptatum fuga, impedit sequi totam numquam assumenda repellat
       tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
       totam deserunt non porro reprehenderit.
     </p>
       
     <p>
       Dicta totam non iusto labore sapiente numquam hic tempora earum,
       minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
       laboriosam harum. Quidem!    
     </p>
         
     <p>
       Suscipit repellendus cupiditate dignissimos eveniet beatae quas
       laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
       necessitatibus autem ipsam debitis libero sapiente!
     </p>
       
     <p>
       Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
       Molestias exercitationem in quia possimus consectetur dolorum sequi
       veniam quo corporis ullam?
     </p>
       
     <p>
       Suscipit repellendus cupiditate dignissimos eveniet beatae quas
       laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
       necessitatibus autem ipsam debitis libero sapiente!
     </p>
         
     <p>
       Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
       Molestias exercitationem in quia possimus consectetur dolorum sequi
       veniam quo corporis ullam?
     </p>
         
     <p>
       Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
       officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
       reiciendis nostrum saepe aperiam?
     </p>
     
   </section>
 </body>
</html>

Aynı bölümde birkaç paragraf olduğuna dikkat edin. Bunları ayrı ayrı biçimlendirmek için her birine ayrı bir sınıf verebilir ve bir CSS sınıf seçicisi kullanabilirsiniz. Ancak bu, özellikle içerik sık sık değişebiliyorsa, pek pratik değildir. Bunun yerine, HTML'de bulunmayan ancak yine de öğeleri hedeflemenize ve stillendirmenize izin veren sözde sınıfları kullanabilirsiniz. Nasıl çalıştığını görelim:

CSS

Kod:

body {
 font-size: 1em;
}
header {
 font-size: 3em;
}
 
/* Selecting the first paragraph */
p:first-child {
 font-size: 1.3em;
}
 
/* Selecting the last paragraph */
p:last-child {
 color: red;
 text-decoration: underline;
}
 
/* Selecting the nth paragraph */
p:nth-child(3) {
 color: blue;
 font-style: italic;
}
p:nth-child(4) {
 color: #666;
 font-size: 1.9em;
}
p:nth-child(5) {
 color: yellowgreen;
 font-weight: bold;
}

Çıktı:

:first-child , :nth-child(x) ve :last-child gibi basit sözde sınıfları kullanarak paragrafları kolayca seçebilir ve biçimlendirebiliriz. Bu sözde sınıfların alt öğelerini değil, paragrafları kendilerinin seçtiğini unutmayın.

Kullanıcı Eylemi Sözde Sınıf Örneği

Kullanıcı eylemi veya davranışsal sözde sınıflar, yalnızca kullanıcı belgeyle etkileşim kurduğunda uygulanır. En popüler örneklerden biri :link , :visited , :hover ve :focus durumlarını içerir. Bir bağlantı ve bir resim için :hover durumu örneğini görelim .

HTML

Kod:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>Pseudo-class and Pseudo-element</title>
 </head>
 <body>
   <div class="image-box">
     <img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
     <img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
   </div>
   <div>
     <a href="#">Learn more about Pseudo-classes</a>
   </div>
 </body>
</html>

Bu örnekte, iki resim ve bir bağlantı vardır. Görüntüler aynı noktaya yerleştirilmiştir, böylece birini gizleyip diğerini göstererek değiştirebilirsiniz.

CSS

Kod:

body {
 font-family: 'Inter', sans-serif;
}
.image-box {
 position: relative;
 width: 70%;
 margin: 5em;
 color: #fff;
}
.image-box img {
 display: inline-block;
 position: absolute;
 left: 0;
 width: 70%;
}
.image-box img.img-front:hover{
 opacity:0;
 cursor: pointer;
}
a {
 position: absolute;
 bottom: 2em;
 left: 3em;
 text-decoration: none;
 color: #222;
 display: inline-block;
 font-size: 2.5em;
 font-weight: 600;
 border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
 color: rgb(250, 0, 0);
 border-bottom: none;
}

Bu ilk örnek, bağlantının üzerine gelmenin etkisini gösterir. CSS rengini ve kenarlığını değiştirir:

Bu ikinci örnekte, görüntünün üzerine gelmenin etkisini görebilirsiniz. Opaklığı 0'a ayarlanmıştır, bu da görüntüyü etkili bir şekilde şeffaf hale getirir.

Sözde Öğe Nedir?

Bir sözde eleman, bir sözde sınıfa benzer şekilde davranır. Sözde sınıfın mevcut bir öğeye uygulandığını unutmayın. Bu arada bir sözde öğe, yeni bir HTML öğesi varmış gibi davranır. Ayrıca, bir sözde öğe çift iki nokta üst üste ( :: ) ile başlar . Bir örnekle nasıl çalıştığını görelim.

HTML

Kod:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>Pseudo-class and Pseudo-element</title>
 </head>
 <body>
   <header>
     <div class="header-img">
       <img src="By_Unsplash.jpg" alt="Coding on a laptop" />
     </div>
   </header>
 </body>
</html>

Şimdi, Daha Fazla Bilgi metnini eklemek için bir ::before sözde öğesi ve yalnızca CSS kullanarak Şimdi Satın Al metnini eklemek için bir ::after sözde öğesi kullanacağız . Ayrıca bu sözde öğeleri ana kapsayıcıya göre yerleştirmek için position özelliğini uygulayacağız.

Kod:

body {
 font-family: 'Inter', sans-serif;
 color: #666;
}
img {
 width: 30em;
 vertical-align: middle;
}
.header-img::before {
 content: "Learn More";
 color: #fff;
 background-color: rgb(75, 159, 192);
 padding: 0.3em 5em;
 display: inline-block;
 position: absolute;
 top: 25px;
 left: -70px;
 transform: rotate(-45deg);
}
.header-img::after {
 content: "Buy Now";
 color: #fff;
 background-color: rgb(212, 115, 91);
 padding: 0.3em 5em;
 display: inline-block;
 position: absolute;
 bottom: 25px;
 right: -70px;
 transform: rotate(-45deg);
}
header {
 position: relative;
 overflow: hidden;
 font-weight: 600;
}
header,
section {
 width: 30em;
}

Son efekt, 'şerit' benzeri etiketleri görüntünün sol üst ve sağ alt kısımlarına yerleştirir:

Sözde Sınıflara ve Sözde Öğelere Sahip Olun

CSS sözde sınıfları ve sözde öğeler, doğru kullanıldığında birçok olasılığa kapı açar. İlk başta bunalmış hissedebilirsiniz, ancak bu tekniği uygulamak, web tasarım becerilerinizi geliştirmenin anahtarıdır. Anahtar, tasarımlarınızı her zaman kapsamlı bir şekilde test etmek ve Google Chrome'un DevTools gibi özellikleri kullanmaktır.

Sözde sınıfların ve sözde öğelerin temellerini öğrendiğinizi umuyoruz. Unutma, öğrenme asla durmaz! Bu nedenle, yeni CSS seçicileri keşfetmeye devam edin ve bunları bir sonraki projenizde uygulamaya ve test etmeye çalışın.