سلکتورها در CSS

در مقاله قبل فهمیدیم CSS چیه و با CSS آشنا شدیم در این مقاله می خواهیم با مهم ترین سلکتورها در CSS آشنا شویم.

اگر با سینتکس CSS آشنایی ندارید حتما این مقاله را بخوانید: CSS چیست به زبان ساده

سلکتور چیست ؟

برای استایل دادن به یک تگ خاص HTML احتیاج داریم که بتوانید آن تگ را انتخاب کنیم و سپس آن را استایل دهی کنیم با استفاده از سلکتورها در CSS می توانیم تگ مورد نظر را انتخاب کرده و استایل مورد نظر خود را به آن تگ بدهیم روش های مختلفی برای انتخاب یک تگ HTML وجود دارد که در ادامه با آنها آشنا می شویم.

سلکتور ها در CSS برای انتخاب کردن و سپس استایل دادن به تگ های HTML استفاده می شوند روش های مختلفی برای انتخاب یک تگ HTML وجود دارد که در ادامه با آنها آشنا می شویم.

انتخاب بر اساس اسم تگ

شما با استفاده از اسم تگ می توانید تمام عناصر HTML با  آن اسم را انتخاب و سپس استایل دهی کنید.

<p> نارنجک </p>

p {
 text-align: center;
 color: red;
}

انتخاب بر اساس id تگ

هر تگ HTML می تواند یک id خاص داشته باشد و با استفاده از این id می توانیم آن تگ را انتخاب و سپس استایل دهی کنیم برای انتخاب یک تگ با استفاده از id در CSS باید قبل از id علامت # را بگذاریم.

از یک id در HTML فقط برای یک تگ می توان استفاده کرد id ها در HTML برای هر تگ باید خاص باشند.

<p id="route" > نارنجک </p>

#route {
  text-align: center;
  color: green;
}

انتخاب بر اساس class تگ

ما می توانیم برای هر تگ HTML یکی کلاس تعریف کنیم اما این کلاس همانند id مختص به یک تگ نیست و می توان آن را برای هر تگ دلخواه استفاده کرد برای انتخاب یک تگ با استفاده از class در CSS باید قبل از class علامت . را بگذاریم

<p class="route" > نارنجک </p>

.route { text-align: center; color: green; }

یک تگ می تواند چند کلاس هم داشته باشد.

<p class="route route2" > نارنجک </p>

.route { text-align: center; color: green; }
.route2 { color: red; }

برای انتخاب کردن تمام عناصر HTML از علامت * استفاده می کنیم

* { text-align: center; color: green; }

اگر چند تگ یک استایل مشابه دارند می توانید به جای اینکه هر کدام را جدا بنویسید تمام سلکتورها را در یک خط بنویسید و با کاما جدا کنید.

h1 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

h1, p {
  text-align: center;
  color: red;
}

اگر می خواهید یک تگ که فرزند تگ دیگری است را انتخاب کنید می توانید به صورت زیر عمل کنید در مثال زیر تگ p انتخاب شده است که فرزند یا درون تگ div است.

div p { text-align: center; color: red; }

ویژگی های سلکتورها در CSS

سلکتور hover: که برای زمانی استفاده می شود که موس را روی یک عنصر خاص HTML می برید در مثال زیر تگ a در حالت عادی آبی است اما زمانی که موس روی آن برود قرمز می شود.

a { color: blue; }   /// در حالت عادی آبی است

a:hover { color: red; }   ///  زمانی که موس روی آن برود قرمز می شود

سلکتور active: که برای زمانی استفاده می شود که روی یک عنصر خاص کلیک می کنید و با برداشت دستتان از روی موس از بین می رود.

a { color: blue; } /// در حالت عادی آبی است 

a:active { color: red; } /// زمانی که کلیک کنید قرمز می شود و با برداشتن کلیک آبی

سلکتور focus: که برای زمانی استفاده می شود که روی یک عنصر خاص کلیک می کنید و با برداشت دستتان از روی موس از بین نمی رود.

a { color: blue; } /// در حالت عادی آبی است

 a:active { color: red; } /// زمانی که کلیک کنید قرمز می شود و با برداشتن کلیک قرمز می ماند

سلکتور (nth-child(n: که با استفاده از آن می توانید n امین تگ از نوع خود را انتخاب کنید کافیه به جای n عدد مورد نظر خود را بنویسید برای مثال اگر می خواهید سومین div را انتخاب کنید می توانید مانند کد زیر عمل کنید.

div:nth-child(3) { color: blue; }

سلکتورهای بسیاری در زبان CSS وجود دارد که در این مقاله ما با مهم ترین آن ها آشنا شدیم امیدوارم این مقاله هم براتون مفید بوده باشه.