CSS Selectors ئەو ڕێگایانەن کە پێیانەوە دەتوانیت تاگەکانی HTML دیاری بکەیت بۆ ئەوەی شێواز (style) پێ بدەیت.
جۆرەکانی CSS Selectors
1. Element Selector (Selector ی تاگ)
ئەمە سادەترین جۆرە. ناوی تاگەکە وەکوو selector بەکاردێت:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
h1 {
color: red;
}
p {
font-size: 16px;
}
div {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>بەخێربێن بۆ پەڕەی نموونە</h1>
<div>
<p>ئەم پەرەگرافە لە ناو باکگراوندێکی شینایە</p>
</div>
</body>
</html>
ڕوونکردنەوە:
- هەموو
<h1>ەکان سوور دەبن - هەموو
<p>ەکان قەبارەی نووسینیان 16px دەبێت - هەموو
<div>ەکانیان باکگراوندیان شین دەبێت
2. Class Selector (Selector ی پۆل)
بۆ دیاریکردنی تاگەکان بەپێی attribute ی class. لە پێشەوە ( . ) دادەنرێت:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
.big-text {
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">ئەم دەقە ڕەنگی زەردی هەیە.</p>
<p class="big-text">ئەم دەقە گەورەتر نووسراوە.</p>
<p class="highlight big-text">ئەمەش هەردوو تایبەتمەندییەکانی هەیە.</p>
</body>
</html>
3. ID Selector (Selector ی ناسنامە)
بۆ هەڵبژاردنی تاگە تایبەتەکان بەپێی attribute ی id. لە پێشەوە ( # ) دادەنرێت.
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
#header {
text-align: center;
}
#main-content {
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1>بەخێربێن بۆ ماڵپەڕەکەمان</h1>
</div>
<div id="main-content">
<p>ئەمە ناوەڕۆکی سەرەکیی پەڕەکەیە. لێرە دەکرێت زانیارییە گرنگەکان بنوسرێن.</p>
</div>
</body>
</html>
4. Multiple Selectors (Selector ی چەند تاگێک)
بۆ دانانی شێواز و ڕەنگی یەکسان بۆ چەند تاگێک:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
h1, h2, h3 {
color: blue;
font-family: Arial;
}
.btn, .button, #submit {
padding: 10px;
border: none;
}
</style>
</head>
<body>
<h1>سەرپەڕەی سەرەکی</h1>
<h2>بابەتی سەرەکی</h2>
<h3>بابەتی سەرەوە</h3>
<button class="btn">کلیک بکە</button>
<button class="button">دوگمەی جیاواز</button>
<button id="submit">ناردن</button>
</body>
</html>
5. Descendant Selector
بۆ دیاری کردنی ئەو تاگانەی لە ناو تاگێکی تردان:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
div p {
color: red;
}
ul li {
list-style-type: none;
}
</style>
</head>
<body>
<div>
<p>ئەم دەقە لە ناو دیڤە و ڕەنگی سوورە.</p>
</div>
<ul>
<li>بابەتی یەکەم</li>
<li>بابەتی دووەم</li>
<li>بابەتی سێیەم</li>
</ul>
</body>
</html>
ڕوونکردنەوە:
- هەموو
<p>ەکان کە لەناو<div>دان، سوور دەبن - هەموو
<li>ەکان کە لەناو<ul>دان، لەسەر شێوەی bullet points نامێنن
6. Child Selector
دیاری کردنی ڕاستەوخۆ، نەک هەمووی:
ئەمە ئەوە دەگەیەنێت، کە تەنها ئەو تاگانە دیاری دەکرێن کە سەر بە باوانی ئەسڵین، نەک ئەو تاگانەی کە لە ناو تاگێکی تردان:
<!DOCTYPE html>
<html rtl="rtl">
<head>
<meta charset="UTF-8">
<style>
div > p {
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>ئەم دەقە بە فۆنتی تۆخ نووسراوە چونکە ڕاستەوخۆ لە ژێر دیڤەکەیە.</p>
<section>
<p>ئەم دەقە تۆخ نییە چونکە لە ناو سێکشنێکی تری دیڤەکەیە.</p>
</section>
</div>
</body>
</html>
ڕوونکردنەوە:
لێرەدا هەموو ئەو <p> یانە دیاری دەکرێن کە ڕاستەوخۆ سەر بە <div>
7. Adjacent Sibling Selector
ئەو تاگەی کە لەدوای تاگێکی ترەوە دێت ڕاسەتەوخۆ :
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
h1 + p {
margin-top: 0;
}
</style>
</head>
<body>
<h1>سەرپەڕەی سەرەکی</h1>
<p>ئەم دەقە دوای h1 دێت و margin-top ی نییە.</p>
<p>ئەم دەقە margin-top ی خۆی هەیە چونکە لە دوای h1 نییە بە ڕاستەوخۆ.</p>
</body>
</html>
یەکەم <p> کە لەدوای <h1> دێت کاریگەری لەسەر دەبێت و شێوازی دەگۆڕێت.
8. Attribute Selectors
دیارکردن بەپێی attributes:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
[title] {
text-decoration: underline;
}
[type="text"] {
border: 1px solid gray;
}
[class^="btn"] {
padding: 10px;
}
</style>
</head>
<body>
<p title="زانیاری زیاتری دەربارەی ئەم دەقە">ئەم دەقە title هەیە و بەهۆی CSS هێڵی ژێرەوەی تێدایە.</p>
<input type="text" placeholder="ناوت بنوسە">
<button class="btn-primary">دوگمەی سەرەکی</button>
<button class="btn-danger">دوگمەی مەترسی</button>
</body>
</html>
ڕوونکردنەوە
لێرەدا هەموو ئەو تاگانە دیاری دەکرێن کە خاسیەتی title یان خاسیەتی type ــیان لە جۆری text ، یان ئەو تاگانەی کە کلاسیان هەیە و بە btn دەستپێدەکات
9. Pseudo-classes
بۆ ئاستی جیاوازی تاگەکان:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<title>نموونەی Pseudo-Classes</title>
<style>
a:hover {
color: red;
}
a:visited {
color: purple;
}
input:focus {
border: 2px solid blue;
}
li:first-child {
font-weight: bold;
}
li:last-child {
margin-bottom: 0;
}
li:nth-child(2) {
color: green;
}
</style>
</head>
<body>
<h1>پەیوەندیدارەکان</h1>
<p>
<a href="https://ferkar.org" target="_blank">کلیک بکە بۆ ماڵپەڕ</a>
</p>
<h2>فۆڕم</h2>
<input type="text" placeholder="ناوت بنوسە">
<h2>لیست</h2>
<ul>
<li>بابەتی یەکەم (تۆخ)</li>
<li>بابەتی دووەم (سەوز)</li>
<li>بابەتی سێیەم</li>
<li>بابەتی چوارەم (دوا)</li>
</ul>
</body>
</html>
تەکنیکەکانی بەکارهێنان
1. Specificity (دیاریکراویی)
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
/* کمترین specific */
p {
color: blue;
}
/* specific زیاتر */
div p {
color: red;
}
/* specific ـی زۆرترین */
#content div p {
color: green;
}
</style>
</head>
<body>
<p>ئەم دەقە شینە چونکە سەرەتایەتییە.</p>
<div>
<p>ئەمە لە ناو دیڤیە، پێویستە سوور بێت.</p>
</div>
<div id="content">
<div>
<p>ئەمە گرنگترینە و پێویستە سەوز بێت.</p>
</div>
</div>
</body>
</html>
2. Performance Tips (ڕاوێژەکانی کارکردن)
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
/* باش */
.navigation {
list-style: none;
}
/* خراپ - زۆر دیاریکراو */
ul.navigation li a span {
color: blue;
}
</style>
</head>
<body>
<ul class="navigation">
<li><a href="#"><span>سەرەتا</span></a></li>
<li><a href="#"><span>دەربارە</span></a></li>
<li><a href="#"><span>پەیوەندی</span></a></li>
</ul>
</body>
</html>
CSS Selectors زۆر بەهێزن و دەتوانیت تەواوی تاگەکان بە وردی کۆنترۆڵ بکەیت. بە ڕاهێنانکردن هەموویان ئاسان دەبن!