2.5. Css selektorlar
Bir yamasa bir neshe elemtlerge ruxsat alıw usılı selekciya dep ataladı, hám sol jumıstı orınlawshı qaǵıydalar bólimi selektori dep ataladı. CSS te bir neshe túrli selektorlar bar.
Túri boyınsha selector
Túri boyınsha selector HTML-elementler menen islesedi, mısalı <p> yaki <i>. Mısal ushın, tómendegi qaǵıydalar <p> …… </p> tegleri jaylasqan tekstlerdi tolıq tegisleniwin támiynleydi:
p { text-align:justify; }
Awládlar selektorı
Awládlar selektorı elementler ishinde jaylasqan elementlerge qaǵıydalardı qollawǵa imkan beredi. Mısalı, tómendegi qaǵıyda <b> …. </b> teglerdegi tekstge qızıl reń berıwdı támiynleydi, lekin bul teglar <p> ….. </p> tegleri ishinde jaylasqan bolıwı shárt (mısal ushın <p><b>Sálem</b></p>):
p b { color: red; }
Awládlardıń bir birine qoyılıwı sheksiz tákirarlanıwi múmkin, sonıń ushın tómendegi qaǵıyda markerlengen dizimdegi qalın teksttiń reńin kók qılıwǵa maqul:
ul li b { color: blue; }
Ámeliy mısal sıpatında nomer boyınsha tártiplesken dizim ishinde jaylasqan basqa tártiplesgen dizimdi kórip shıǵamız, hám bul dizimde standart emes tártiplew dizimi paydalanıwı kerek bolsin. Bul maqsetge erisiw ushın sanlardı háriplerge almastıramız:
2.2 mısal. Awladlar selektorınan paydalanıw
<!DOCTYPE html>
<html>
<head>
<style>
ol ol { list-style-type:lower-alpha; }
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
</ol>
</body>
</html>
Bul HTML-kodti brauzerde júklegende biz tómendegi nátiyjege erisemiz – ekinshi dárejeli dizim elementleri hárip penen baslanadı:
2.2 Suwret. Awladlar selektorına mısal
Perzent selektorları
Perzent selektorları awládlar selektorlarına uqsas bolıp, olar tek ǵana tuwrıdan-tuwrı perzent elementlerin tańlap, stildi qollaw dógeregin anıqraq etip kórsetedi. Mısal ushın: tómendegi kod awládlar selektorlarınan paydalanip, abzats ishinde qalın qılıp jazılǵan tekstti qızıl reńge boyaydı, bul qalın tekst qıya belgilew tegi ishinde bolǵanlıǵına qaramastan (mısal, <p><i><b>Sálem</b> dúnya</i></p>):
p b { color:red; }
Sálem sózi qızıl reńde shıǵarılǵan. Lekin sonsheli ulıwmalastırılǵan qılıq shárt bolmasa, selektordiń qollaw dógeregin taraytırıw ushın perzent elementler selektorı paydalanıwı múmkin. Mısal ushın: tómendegi perzent elementler selektori tek ǵana abzactıń tuwrıdan-tuwrı perzent elementlerine qollanıladı hám tekstti qalın etip shıǵarıp beredi, hám bul perzent element basqa element ishinde jaylaspawı kerek:
p > b { color : red; }
Házir Sálem sózi óz reńin ózgertirmeydi, sebebi ol <i> …. </i> teg ishinde jaylasqan bolıp, abzatstiń tuwrıdan-tuwrı perzenti emes.
Ámeliy mısaldi kórip shıǵamız. Kóz aldıńızǵa keltiriń biz stildi <li> elementlerine beriwimiz kerek, lekin bul <li> tegler <ol> teginiń tuwrıdan-tuwrı perzenti bolıwı kerek. Tómendegi kod arqalı biz tek ǵana <ol> diń tuwrıdan-tuwrı perzent bolǵan <li> elementlerin qalın qılıp shıǵaramız, <ul> diń <li> perzentleri ózgermeydi:
2.3 mısal. Perzent selektorınan paydalanıw
<!DOCTYPE html>
<html>
<head>
<style>
ol > li { font-weight:bold; }
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
Bul kodti brauzerge júklegennen soń tómendegi nátiyjege erisemiz:
