CSS-ში სპეციფიკურობის წესები

წინა მაგალითში ორივე სელექტორი ერთნაირი იყო და ერთნაირი პრიორიტეტი ჰქონდა. ეს ნიშნავს, რომ ის თვისება იმარჯვებდა, რომელიც ქვევით იყო დაწერილი.

ასევე არის სიტუაციები, როდესაც გვერდის ერთ ელემენტს რამდენიმე სელექტორი შეესაბამება. ამ შემთხვევაში, თვისებების კონფლიქტის დროს გაიმარჯვებს უფრო სპეციფიკური, ანუ უფრო ზუსტი სელექტორი. მოდით განვიხილოთ სპეციფიკურობის წესები.

პირველი წესი

კლასი ყოველთვის იმარჯვებს ტეგის სელექტორზე:

<p class="text">ტექსტი</p>

p {
	color: red;
}
.text {
	color: green; /* გამოყენებული იქნება ეს ფერი */
}

მეორე წესი

იდენტიფიკატორი ყოველთვის იმარჯვებს კლასზე:

<p id="elem" class="text">ტექსტი</p>

.text {
	color: red;
}
#elem {
	color: green; /* გამოყენებული იქნება ეს ფერი */
}

მესამე წესი

თანაბარ პირობებში იმარჯვებს ის სელექტორი, რომელსაც მეტი ნაწილი აქვს. მაგალითად, თუ ჩვენ გვაქვს ორი ტეგის სელექტორი, მაშინ გაიმარჯვებს ის, რომელსაც მეტი ტეგი აქვს:

<div>
	<p>ტექსტი</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* გამოყენებული იქნება ეს ფერი */
}

თუ ორი კლასის სელექტორია, მაშინ გაიმარჯვებს ის, რომელშიც მეტი კლასია მითითებული (თუ იქ იქნება ტეგის სელექტორები, მაშინ ისინი გავლენას არ ახდენენ):

<div class="block">
	<p class="text">ტექსტი</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* გამოყენებული იქნება ეს ფერი */
}