HTML Hangi CSS Kodu Önceliklidir?

CSS'te öncelik, bir stilin belirli bir özelliğinin değerini belirlerken hangi kuralın kullanılacağını belirler. CSS kuralları, belirli bir öğeye veya öğe grubuna uygulanan çeşitli seviyelerde önceliklere sahiptir. Öncelik sıralamasını anlamak için aşağıdaki kuralları göz önünde bulundurmalısınız:

1. Özelleştirici (Inline) Stiller:

   • En yüksek öncelik, bir HTML etiketinin içine yazılan satır içi (inline) stil kurallarındadır.

   <p style="color: red;">Bu paragraf kırmızı renkte olacak.</p>
   

2. ID Seçicileri:

   • ID seçicileri, belirli bir HTML öğesini tanımlamak için kullanılır ve inline stilin önünde gelir.

   #myElement {
     color: blue;
   }
   

3. Class, Pseudo-Class ve Attribute Seçicileri:

   • Class, pseudo-class ve attribute seçicileri genellikle geniş bir kapsamda kullanılır ve ID seçicilerinden sonra gelir.

   .myClass {
     font-size: 16px;
   }
   
   a:hover {
     text-decoration: underline;
   }
   
   input[type="text"] {
     border: 1px solid #ccc;
   }
   

4. Element Seçicileri:

   • Element seçicileri, bir HTML öğe türünü belirtir. Diğer seçicilere göre daha düşük önceliklidir.

   p {
     margin: 10px;
   }
   

5. Universal (*) Seçicisi:

   • Universal seçici, tüm öğeleri seçer ve genellikle daha düşük önceliklidir.

   * {
     padding: 0;
     margin: 0;
   }
   

Eğer aynı özelliğe ait kurallar çakışıyorsa, öncelik sıralamasına göre bir kural seçilir. Ancak, özelleştirici (inline) stil her zaman diğerlerinden daha yüksek önceliğe sahiptir. Öncelikli olmayan durumlarda, kuralların sırasına göre son yazılan kural uygulanır. Bu nedenle, stil kuralınızın önceliğini anlamak ve çakışmaları önlemek için iyi bir tasarım ve organizasyon kullanmak önemlidir.