Web Yakalama ve Dönüştürme Araçları

GrabzIt'ta CSS Seçicilerini Kullanma

CSS seçicileri hedef öğede kullanılır, öğeyi gizler ve bir veya daha fazla HTML öğesini tanımlamak için öğe özelliklerini bekler. İki ana CSS seçici tipi id veya sınıfa göre seçmektir. Bir HTML öğesinin, aşağıda gösterildiği gibi id niteliğini içermesi halinde bir kimliği vardır.

<span id="myidentifier">Example Text</span>

Seçmek için bir CSS seçici yarat #myidentifier

Bir HTML öğesinin bir sınıfı varsa, bu örnekte gösterildiği gibi sınıf özniteliği olacaktır.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

Seçmek için bir CSS seçici yarat .myclass

Sınıfıyla belirli bir öğeyi seçmek istiyorsanız myclass Bunu yapmak için standart bir CSS seçiciyi kullanabilirsiniz. n'inci-çocuk (2) böyle seçiciyi: .myclass:nth-child(2) İkinci myclass alanını seçmek için Ancak bu sadece bu durumda işe yarayacaktır, çünkü ana div öğesinin altında başka bir eleman yoktur. Örneğin, eğer bir p elemanı olsaydı, nt-child indeksini değiştirirdi.

Birden Çok Eşleşen Öğeyi Kullanma

Bir CSS seçiciden birden fazla HTML öğesi döndürülürse ve hedef öğeyi kullanıyorsanız veya öğe özelliklerini beklerseniz, yalnızca ilk eşleşen öğe kullanılır. Ancak, eğer hide element özelliğini kullanıyorsanız, eşleşen tüm HTML elementleri gizlenecektir.

Farklı kimlikleri veya sınıfları olan birden çok öğeyi gizlemek istiyorsanız, bunu her CSS seçiciyi virgülle ayırarak yapabilirsiniz. Mesela yukarıdaki örnek sınıfı ve kimliği gizlemek için aşağıdakileri kullanabilirsiniz. #myidentifier,.myclass