HTML Temel Seçici Komutları

HTML'de temel seçici komutları, belirli HTML öğelerini veya gruplarını hedefleyerek stil uygulamak için kullanılır. İşte HTML'de sık kullanılan temel seçici komutları:

1. Element Seçici:

   • Belirli bir HTML öğe türünü seçer. Örneğin, tüm paragraf öğelerini seçmek için:

   p {
     color: blue;
   }
   

2. ID Seçici:

   • Belirli bir HTML öğesini benzersiz bir kimlik (ID) ile tanımlamışsanız, ID seçicisi kullanabilirsiniz.

   #header {
     background-color: gray;
   }
   

   HTML'de:

   <div id="header">Bu bir başlık</div>
   

3. Class Seçici:

   • Belirli bir HTML öğesine bir veya daha fazla sınıf atayarak, bu sınıfı kullanarak seçim yapabilirsiniz.

   .highlight {
     font-weight: bold;
     color: red;
   }
   

   HTML'de:

   <p class="highlight">Bu paragraf vurgulanmıştır.</p>
   

4. Child (Çocuk) Seçici:

   • Bir öğenin belirli bir alt öğesini seçmek için kullanılır.

   article h2 {
     color: green;
   }
   

   Bu örnekte, <article> öğesinin içindeki tüm <h2> başlıkları seçilir.

5. Descendant (Soyut) Seçici:

   • Bir öğenin belirli bir soyut öğesini seçmek için kullanılır.

   article p {
     font-style: italic;
   }
   

   Bu örnekte, <article> öğesinin içindeki tüm paragraflar seçilir.

6. Attribute (Özellik) Seçici:

   • Bir öğenin belirli bir özelliğine dayanarak seçim yapmak için kullanılır.

   input[type="text"] {
     border: 1px solid #ccc;
   }
   

   Bu örnekte, type özelliği "text" olan tüm <input> öğeleri seçilir.

7. Universal (*) Seçici:

   • Tüm HTML öğelerini seçmek için kullanılır.

   * {
     margin: 0;
     padding: 0;
   }
   

Bu temel seçici komutları, CSS kurallarını belirli HTML öğelerine veya öğe gruplarına uygulamak için kullanılır. Bu seçicilerin kombinasyonları ve daha gelişmiş seçici türleri ile daha karmaşık hedeflemeler ve stil uygulamaları da mümkündür.