Kimliğinde nokta bulunan CSS seçici

HTML spesifikasyonu bir id'de noktalara (.) İzin verir:

<img id="some.id" />

Ancak, CSS kimlik seçici kuralını kullanarak olacak değil doğru maç:

#some.id { color: #f00; }

Kimlik Seçiciler için CSS spesifikasyonu bu durumdan bahsetmez. Öyleyse, bir etiket adı ve sınıf seçici kombinasyonunu kullandığını varsayıyorum ? Örneğin, bir CSS kuralı , benzeri bir sınıf adına sahip a.classNametüm bağlantı etiketlerine ( <a>) uygulanır .className<a class="className"></a>

İçinde nokta bulunan kimliğine göre bir HTML öğesine başvuran harici bir CSS dosya kuralına sahip olmak mümkün müdür?

CSS bir CSS " tanımlayıcısının " noktayı geçerli bir karakter olarak içermediğini belirttiğinden, beklemiyorum . Öyleyse bu, HTML ve CSS özellikleri arasında temel bir uyumsuzluk mu? Farklı türde bir CSS seçimi kullanmak için tek alternatifim mi? Bunu onayladığımdan veya inkar ettiğimden daha zeki biri olabilir mi?

(İşleri basitleştirmek için HTML id özniteliğinden noktayı kaldırırdım, ancak bu sistem tarafından oluşturulmuş bir kimliktir, bu nedenle bu durumda onu değiştirme yeteneğim yok.)

Spesifikasyonları biraz daha araştırdıktan sonra, CSS spesifikasyonunun çoğu dil gibi ters eğik çizgi ( \) kaçışına izin verdiğini gördüm .

Örneğimde aşağıdaki kural eşleşir:

#some\.id {
  color: #f00;
}

Öznitelik seçiciyi şu şekilde de kullanabilirsiniz :

[id='some.id'] {
  color: #f00;
}

İd kullandığınız için, id değerini CSS seçici olarak değil normal bir dize olarak kontrol eden document.getElementById () öğesini de kullanabilirsiniz. örneğin aşağıdakiler de işe yarar:

const myElem = document.getElementById("some.id");

Tek dezavantajı, querySelector ile yapabildiğiniz gibi, aramanın kapsamını sınırlayamazsınız, örneğin someElement.querySelector (). ancak kimlikler her zaman benzersiz olması gerektiğinden, id ile belge çapında arama geçerlidir.