مانند یک حرفه‌ای سلکتورهای پیشرفته CSS بنویسید

با داشتن 3 سال تجربه به عنوان یک توسعه دهنده فرانت-اند فریلنسر، با خود فکر کردم که دیگر هیچ چیز جدیدی در مورد CSS وجود ندارد که بتوانم یاد بگیرم. با این حال، تحصیل در Microverse به من این فرصت را داد تا در واقع به چیزهایی بپردازم که دانشم را در انتخاب سلکتورهای CSS بالا ببرد.

چگونه بهترین سلکتورها را انتخاب کنیم؟

آنجا راهنمای من برای ساخت سلکتورهای پیشرفته CSS به مانند یک حرفه‌ای است. پیروی از این مدل ذهنی، نوشتن سلکتورهای کوتاه و موثر CSS را برای من بسیار آسان کرد.

مرحله اول: به چه ویژگی برای این عنصر نیاز دارید؟

CSS Specificity یک مفهوم بسیار مهم برای درک CSS است، زیرا به شما کمک می‌کند دلیل عدم استفاده از استایل‌های نامناسب خود را بفهمید.

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

آن را به این صورت یاد بگیرید:

1 - General specificity: مربوط به کمترین سطح ویژگی در CSS است و انتخاب عنصر مانند زیر است:

/* this good for basic general style re-use because this color will be applied to 
all paragraphs across the page and can still be easily overridden for specific cases. */
p {
  color:red;
}

2 - Medium specificity: یک سلکتور کلاس است.

/* a class selector is useful when you want to reuse styles for more than one type of elements */
.red {
  color:red;
}

3 - Specific Selector: بالاترین سطح خصوصیت است که باید هنگام پیکربندی ساختار CSS خود در نظر بگیریم و مربوط به id است که در آن انتخاب تگ یا کلاس را لغو می‌کند و فقط توسط یک استایل درون خطی یا خصوصیاتی که دارای کلمه کلیدی مهم هستند، نوشته می‌شود.

/* ID selector is a unique selector in which we use to give a specific element some properties with no intent to re-use it again. */
#nav-bar {
  color:red;
}

اکنون که سلسله مراتبی خاص برای استایل صفحه وب خود ایجاد کرده‌اید، زمان آن فرا رسیده که به عمق آنچه CSS در کنار کلاس‌ها و شناسه‌ها برای انتخاب عناصر ارائه می‌دهد، بپردازید.

مرحله دوم: با سلکتورهای پیشرفته آشنا شوید

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

جعبه ابزار CSS تعداد زیادی سلکتور مانند زیر دارد:

Child Selectors: در آن شما می‌توانید عنصر فرزند پاراگراف را به دو روش مفید انتخاب کنید.

/* Child */

/* Descendant Selector: The descendant selector matches all elements that are descendants of a specified element.*/
p span {
  color:green;
  /* so any code written here will be applied to all span elements inside any paragraph element. */
}


/* Direct Child Selector: It matches only those elements matched by the second selector that are the direct children of elements matched by the first. */
p > span {
  color:white;
  /* will be applied to all direct span child elements of our paragraph element */
}

بنابراین هنگامی که می‌خواهیم فرزندی را از عنصری انتخاب کنیم بسته به نحوه استایل خود می‌توانیم آن را مستقیم (p span) یا به صورت اولویت بندی شده (p > span یعنی اولین فرزند عنصر p) انتخاب کنیم.

Sibling Selectors: در آن عناصر را بسته به آنچه پیش از آن‌ها قرار می‌گیرد و دانستن اینکه والدین مشترک دارند، انتخاب می‌کنیم.

/* Sibling Selectors */

/* General Sibling Selector: matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element. */
p ~ h2 {
  ...;
  /* this is a general sibling selector that looks for h2 elements that follow, and share the same parent, of any p elements.
 In order for a h2 element to be selected it must come after any p element. */
}


/* Adjacent Sibling Selector: matches the second element only if it immediately follows the first element, and both are children of the same parent element. */
p + h2 {
  ...;
  /* h2 that come immediately after any paragraph */
}

Attribute Selectors: در آن عناصر را با ویژگی‌های آن‌ها انتخاب می‌کنیم.

/* Attribute Selectors */

/* Attribute Present Selector */
a[target] {
  ...;
}

/* Attribute Equals Selector */
a[href="http://google.com/"]
{
  ...;
}

/* Attribute Contains Selector */
a[href*="login"] {
  ...;
}

/* Attribute Begins With Selector */
a[href^="https://"]
{
  ...;
}

/* Attribute Ends With Selector */
a[href$=".pdf"] {
  ...;
}

/* Attribute Spaced Selector */
a[rel~="tag"] {
  ...;
  /* At times attribute values may be spaced apart, in which only one of the words needs to be matched in order to make a selection.
 In this event using the tilde character, ~, within the square brackets of a selector between the attribute name and equals sign denotes an attribute value that should be whitespace-separated, with one word matching the exact stated value. */
}


/* Attribute Hyphenated Selector */
a[lang|="en"] {
  ...;
}

Pseudo-classes: در شبه کلاس عناصر منظم را انتخاب می‌کنیم اما تحت شرایط خاص مانند موقعیت آن‌ها نسبت به فرزندان دیگر یا زمانی که تحت یک وضعیت خاص قرار دارند.

/* Pseudo-classes */


/* Link Pseudo-classes */
a:link {
  ...;
/*   It matches every unvisited <a>, <area>, or <link> element that has an href attribute. */
}
a:visited {
  ...;
/* all visited links */
}

/* For normal links and when a link is clicked based on the user history */

/* User Action Pseudo-classes */
a:hover {
  ...;
}
a:active {
  ...;
}
a:focus {
  ...;
}

/* User Interface State Pseudo-classes */
input:enabled {
  ...;
}
input:disabled {
  ...;
}

/* Mainly used with Inputs in forms */

input:checked {
  ...;
}

input:indeterminate {
  ...;
}

/* For checkboxs and radio inputs */

/* Structural & Position Pseudo-classes */

/* :first-child, :last-child, & :only-child */
li:first-child {
  ...;
}
li:last-child {
  ...;
}
div:only-child {
  ...;
}
/* Here the selector li:first-child identifies the first list item within a list, while the selector li:last-child identifies the last list item within a list, thus lines 2 and 10 are selected.
The selector div:only-child is looking for a division which is the single child of a parent element, without any other other siblings.
In this case line 4 is selected as it is the only division within the specific list item. */

/* :first-of-type, :last-of-type, & :only-of-type */
p:first-of-type {
  ...;
}
p:last-of-type {
  ...;
}
img:only-of-type {
  ...;
}

/* :nth-child(n) & :nth-last-child(n) */
li:nth-child(3n) {
  ...;
}

/* :nth-of-type(n) & :nth-last-of-type(n) */
p:nth-of-type(3n) {
  ...;
}

/* Target Pseudo-class */
section:target {
  ...;
}

/* , if a user would visit a page with the URI fragment identifier of #hello, the section with that same ID attribute value would be stylized accordingly using the :target pseudo-class.
 If the URI fragment identifier changes, and matches the ID attribute value of another section, that new section may be stylized using the same selector and pseudo-class from before. */

/* Empty Pseudo-class */
div:empty {
  ...;
}

/* Negation Pseudo-class */
div:not(.awesome) {
  ...;
}

:not(div) {
  ...;
}

Pseudo-elements: شبه عناصر به طور موثری عناصر جدیدی را ایجاد می‌کند که در علامت گذاری سند مشخص نشده‌اند و می‌توانند مانند یک عنصر منظم دستکاری شوند. این مزایای زیادی را برای ایجاد جلوه‌های جالب با حداقل علامت گذاری ارائه می‌دهد. همچنین به طور قابل توجهی در جلوگیری از ارائه فایل خارج از HTML و CSS کمک می‌کند.

/* Pseudo-elements */

/* Textual Pseudo-elements */
.alpha:first-letter,
.bravo:first-line {
  color: #ff7b29;
  font-size: 18px;
}

/* Generated Content Pseudo-elements */
a:after {
  color: #9799a7;
  content: " (" attr(href) ")";
  font-size: 11px;
}

/* Fragment Pseudo-element */
::selection {
  background: #ff7b29;
}

/* Basically a pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example :hover.
 A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ``::after`. */

با استفاده از این ابزارهای جذاب در جعبه ابزار خود، یک کد CSS تمیز می‌نویسید و هنگام ترکیب همه آن‌ها متوجه خواهید شد که در نهایت کد CSS کمتری نوشته‌اید.

اگر هرگونه نظر یا سوالی دارید یا می‌خواهید بخش جدیدی اضافه شود، در بخش زیر با ما در میان بگذارید.

منبع