2.3 Suwret. Perzent selektorlınan paydalanıw
Identifikatorlarǵa iye selektorlar
Eger element selector atina iye bolsa (mısal, <div id=”mydiv”>), oǵan CSS arqalı tuwrıdan-tuwrı múrájet qılıwımız múmkin:
#mydiv {font-style:italic;}
Identifikatorlar hújjette tek ǵana bir márte paydalanıwi múmkin, sonıń ushın CSS qaǵıydaları arqalı berilgen qásiyetler tek birinshi bolıp tabilǵan identifikatorǵa qollanadı. Lekin identifikatorlar eki túrli elementlerde ushraǵan bolsa hám olardıń atları bir bolsa, olarǵa CSS arqalı múrájet qılıwımız múmkin:
<div id='myid'> Sálem </div> <span id='myid'> Sálem </span>
Identifikatorlar tek ózgeshe elementlerge paydalanǵanlıǵı sebepli, tómendegi qaǵıyda tek birinshi bolıp turǵan myid-na qollaniladı:
#myid { text-decoration:underline; }
Lekin CSS kodın ekewine de qollawǵa erisiwimiz múmkin:
span#myid { text-decoration:underline; }
div#myid { text-decoration:underline; }
Yaki qisqa jaziwda:
span#myid, div#myid { text-decoration:underline; }
Sonday selkciya usılın paydalanbawǵa usınıs etiledi, sebebi bul elementler menen islesetuǵın JavaScript kodlar sol tártipti epley almaydi – kóp qollanatuǵın getElementbyId funkciyası tek birinshi elementti qaytarıp beredi. Sonıń ushın identifikatorlarǵa ózgeshe atlardı tańlaw usınıs etiledi.
Klass selektori
Eger bette bir stilde kóriniwi kerek bolǵan elementler bar bolsa, olarǵa bir atli klass berıwımız múmkin (mısal, <span class=“myclass”>), hám bul elementlerdi ózgertetuǵın jalǵız qaǵıyda jaratamiz. Mısalı bárshe elementlerge shep tárepten 10 piksel jıljıtıw beriw ushın, tómendegi qaǵıydadan paydalanamiz:
.myclass { margin-left: 10px;}
Zamanagóy brauzerlerde bir neshe klasstan paydalanatuǵın HTML-elementleri bar bolıwı múmkin, sol waqıtta klass atları arasında ashıq orın qaldırıladı, mısalı: <span class=”class1 class2 class3”>. Lekin esińizde bolıwı kerek, bazı bir góne brauzerler klass sıpatinda tek bir attı qabıl qıladı.
Klasstıń ámel qılıw dógeregin taraytırıw ushın qaǵıyda qaysı elementlerge qollanılıwı kerek ekenligin kórsetiwińiz múmkin. Mısalı, tómendegi qaǵıyda sazlawlardı tek main klassina iye abzaclarına qollanıladı:
p.main { text-indent:30px;}
Bul mısalda tek main klassinan paydalanǵan abzaclar (<class== “main”> sıyaqlı) jańa qásiyetti aladı. Bul qaǵıyda basqa elementlerge tásir qılmaydı, olar usı klasstan paydalansa da (<div class = “main”> siyaqli).
Atributlar selektori
Kóplegen HTML kodlar atributlardı qabıl etedi hám sol túrdegi selektordan paydalanıwda siz elementlerge identifikator hám klasslar belgilewden qutılasiz. Mısalı bárshe type = “submit” atributınan paydalanatuǵın elementlerge 100 piksel en beriw ushın:
[type=”submit”]{width:100px;}
Bul selektordıń qollanıw dágeregin taraytiw ushın, mısalı onı tek forma elementlerine qollaw ushın, tómendegi qaǵıydadan paydalanıwımız múmkin:
form.input[type=”submit”]{width:100px;}
Toparlı selekciya
Biz CSS ti paydalanǵanda qaǵıydanı bir waqıttiń ózinde bir neshe element, klass yaki basqa qandayda bir selektorǵa qollaw imkaniyatına iyemiz, bul ushın selektorlardı útir belgisi menen ajratıladı. Mısalı, tómendegi qaǵıyda abzac, idname atli identifikator hám classname atli klassqa iye elementler tómeninde toq sarı reńli noqatlı sızıq sızıp beredi:
p, #idname, .classname { border-bottom: 1px dotted orange;}
2.4 mısal. Toparlı selekciya:
<html>
<head>
<style>
p{text-align:justify;}
p b{color:red}
ul li b{color:blue;}
#mydiv{font-style:italic;}
</style>
</head>
<body>
<p>Bul abzac.</p>
<p>Bul abzacta <b>qalin tekst bar</b></p>
<ul>
<li>Bul dizimnin elementi</li>
<li>Bul jerde <b>qalin element</b> bar</li>
</ul>
<div id="mydiv">Bul div elementke mydiv identifikatori berilgen</div>
</body>
</html>
2.4 súwrette túrli selektorlardı qollaw nátiyjesi hám olarǵa qollanǵan qaǵıydalar kórsetilgen.
