آموزش CSS - انتخابگرها

انتخابگرها (selectors) در CSS الگوهایی هستند که برای انتخاب و استایل عناصر HTML در یک صفحه وب استفاده می‌شوند. این انتخابگرها(selectors) به شما امکان می‌دهند تا به عناصر خاص یا گروه‌هایی از عناصر برای اعمال استایل‌هایی مانند رنگ‌ها، فونت‌ها، حاشیه‌ها و غیره مشخص شده، دسترسی پیدا کنید. انتخاب‌گرها یک بخش اساسی از Cascading Style Sheets (CSS) هستند که برای کنترل نمایش و طرح بندی اسناد وب مورد استفاده قرار میگیرد.

لیست‌های انتخابگرها

اگر از صفت ومقدار یکسان css توسط بیش از یک سلکتورها استفاده شود، این سلکتورها می‌توانند با یکدیگر ترکیب شوند تا یک لیست انتخاب‌گر (selector list) ایجاد کنند.بنابراین قوانین در CSS برای همه انتخابگرها اعمال می شود.

برای مثال، صفت و مقدار یکسان ، color: crimson برای عنصر p و کلاسsample. استفاده شود، به صورت زیر نوشته می‌شود:

p {
   color: crimson;
}

.sample {
   color: crimson;
}

اما، ما می‌توانیم این دو قاعده را به یک لیست انتخاب‌گر ترکیب کنیم، با افزودن یک کاما برای جدا کردن آن‌ها، همان‌طور که در زیر نشان داده شده است:

p, .sample {
   color: crimson;
}

همانطور مشاهده می کنید کلاس sample. به صورت غیر معتبر تعریف شده است و مقدار و صفت به عنصر مربوطه اعمال نخواهد شد ولی به دلیل اینکه به صورت مجزا تعریف شده اند برای بقیه عناصر که به صورت یکسان میباشند مشکلی پیش نخواهد آمد یعنی صفت و مقدار عنصر p به صورت معتبراعمال خواهد شد

p {
   color: crimson;
}

..sample {
   color: crimson;
}

ولی اگر هرکدام از انتخاب‌گرها در لیست انتخاب‌گر غیرمعتبر باشد، تمامی مقادیر و صفت های تعریف شده اعمال نخواهد شد و غیرمعتبر تلقی می‌شود.
توصیه می‌شود هر انتخاب‌گر را در خط جدید تعریف کنید

p, ..sample {
   color: crimson;
}

انتخاب‌گر عناصر اچ ای ام ال (Type Selector)

Type Selector یعنی اینکه عناصر HTML به عنوان selectorsدرنظر گرفته میشود ، مانند <h1>، <p> و غیره.

p {
   color: green;
}

h1 {
   text-decoration-line: underline;
}

مثال زیر نحوه استفاده از یک Type Selector را نشان می‌دهد:

<html>
<head>
<style>
   div {
      border: 5px inset gold;
      width: 300px;
      text-align: center;
   }

   p {
      color: green;
   } 

   h1 {
      text-decoration-line: underline;
   }
</style>
</head>
<body>
   <div>
      <h1>Type selector</h1>
      <p>div with border and text-aligned to center</p>
      <p>paragraph with green color</p>
      <p>h1 with an underline</p>
   </div>
</body>
</html>

انتخاب‌گر کلاس( Class Selector)

Class Selector به این صورت میباشد که برای تعریف یک عنصر با مقدار خاص برای انتخابگر آن از class استفاده میشود

.style-h1 {
   text-decoration-line: underline;
}

.style-p {
   color: green;
   font-size: 25px;
}

مثال زیرنحوه استفاده از یک انتخاب‌گر کلاس را نشان می‌دهد، مثالی برای style-p. و style-h1. و style-div. که برای انتخاب‌گرهای کلاس هستند:

<html>
<head>
<style>
   .style-div {
      border: 5px inset gold;
      width: 300px;
      text-align: center;
   }

   .style-p {
      color: green;
      font-size: 25px;
   } 

   .style-h1 {
      text-decoration-line: underline;
   }
</style>
</head>
<body>
   <div class="style-div">
      <h1 class="style-h1">class selector</h1>
      <p class="style-p">class .style-p applied</p>
      <p>No class applied on this p element</p>
   </div>
</body>
</html>

انتخاب‌گر شناسه(ID Selector)

ID Selector به این صورت میباشد که برای تعریف یک عنصر با مقدار خاص برای selectors آن از id استفاده میشود

#style-p {
   color: green;
   font-size: 25px;
} 

#style-h1 {
   text-decoration-line: underline;
   color: red;
}

مثال زیرنحوه استفاده از یک انتخاب‌گر ID را نشان می‌دهد، مثالی برای style-p# و style-h1 # و style-div# که برای انتخاب‌گرهای ID هستند:

<html>
<head>
<style>
   #style-div {
      border: 5px inset purple;
      width: 300px;
      text-align: center;
      background-color: lightgoldenrodyellow;
   }

   #style-p {
      color: green;
      font-size: 25px;
   } 

   #style-h1 {
      text-decoration-line: underline;
      color: red;
   }
</style>
</head>
<body>
   <div id="style-div">
      <h1 id="style-h1">ID selector</h1>
      <p id="style-p">id #style-p applied</p>
      <p>No id applied on this p element</p>
   </div>
</body>
</html>

انتخاب‌گر ویژگی(Attribute Selector)

Attribute Selectorبرای تعریف یک عنصر با مقدار خاص برای ویژگی به صورت زیر تعریف میشود:

a[target] {
   background-color: peachpuff;
}

شما همچنین می‌توانید عنصر را با داشتن یک ویژگی با مقدار خاص مشخص کنید.

a[href="www.example.com"] {
   background-color: peachpuff;
}

مثال زیر نحوه استفاده از یک انتخاب‌گر ویژگی را نمایش میدهد:

<html>
<head>
<style>
   a[target] {
      background-color: peachpuff;
      color: blueviolet;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>Attribute selector</h2>
   <p>Styling applied to anchor element with target attribute:</p>
   <a href="#">Tutorialspoint</a>
   <a href="#" target="_blank">google</a>
   <a href="#" target="_self">wikipedia</a>
</body>
</html>

انتخاب‌گر شبه-کلاس(Pseudo-class Selector)

انتخاب‌گر شبه-کلاس برای استایل دادن به یک وضعیت خاص از یک عنصر استفاده می‌شود، مانند :hover که برای استایل دادن به یک عنصر در حالت هاور شده استفاده می‌شود.

a :hover {
   background-color: peachpuff; 
   color: green;
   font-size: 2em;
}

مثال زیر نحوه استفاده از یک انتخاب‌گر شبه-کلاس را نشان می‌دهد:

<html>
<head>
<style>
   a:hover {
      background-color: peachpuff;
      color: green;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>Pseudo-class selector</h2>
   <p>Styling applied to anchor element with a pseudo-class:</p>
   <a href="#">Tutorialspoint</a>
</body>
</html>

انتخاب گر شبه-عنصر (Pseudo-element Selector)

Pseudo-element Selector برای استایل دادن به یک بخش خاص از یک عنصر میباشدیعنی قبل یا بعد از محتوای خودتگ استایل دلخواه را میتوانیم تعریف کنیم.

a::before {
   content: url();
}

مثال زیر نحوه استفاده از یک انتخاب‌گر شبه-عنصر (::before) را نشان می‌دهد:

<html>
<head>
<style>
   a::before {
      content: url('images/smiley.png');
   }

   a::after {
      content: "   Pseudo-element ::after applied";
      color: red;
      background-color: chartreuse;
   }
</style>
</head>
<body>
   <h2>Pseudo-element selector</h2>
   <p>Styling applied to anchor element with a pseudo-element:</p>
   <a href="#">Tutorialspoint</a>
</body>
</html>

ترکیب کننده ها (Combinators)

Combinator رابطه بین انتخابگرها را نشان می دهند. دو یا چند سلکتور ساده می‌توانند با استفاده از یک Combinators ترکیب شوند تا یک سلکتور شکل بگیرد.

مثال زیر نحوه استفاده از یک انتخاب‌گر پدر (فاصله) وCombinators فرزند را نشان می‌دهد:

<html>
<head>
<style>
   /* style applied to only div */
   div {
      border: 2px solid black;
      width: 300px;
   }
   /* style applied to all li elements directly under ul */
   ul li {
      background-color: lightpink;
      color: purple;
      font-size: 1.5em;
      padding: 5px;
      margin-right: 15px;
   }

   /* style applied to all li elements that are child element to ol element */
   ol > li {
      background-color: bisque;
      color: black;
      font-size: 0.75em;
      padding: 5px;
   }
</style>
</head>
<body>
   <div>
   <ul>
      <li>Item One</li>
      <li>Item Two
         <ol>
            <li>Nested 1</li>
            <li>Nested 2</li>
         </ol></li>
      <li>Item Three</li>
      <li>Item Four</li>
      <li>Item Five
         <ol>
            <li>Nested 3</li>
            <li>Nested 4</li>
         </ol>
      </li>
   </ul>
   </div>
</body>
</html>

انتخاب‌گر عمومی(Universal Selector)

همانطور که از نامش مشخص است همه عناصر هایی که به صورت عمومی تعریف شده اند انتخاب می‌کند. که توسط نماد * قابل تعریف میباشد. به عنوان مثال کد زیر برای همه المنت‌های موجود در صفحه مقدار paddingوmargin را روی ۰ تنظیم می‌کند

/* Selects and styles all elements on the page */
* {
   margin: 0;
   padding: 0;
}

مثال زیر نحوه استفاده از یک انتخاب‌گر عمومی (*) را نشان می‌دهد:

<html>
<head>
<style>
   * {
      background-color: peachpuff;
      color: darkgreen;
      font-size: 25px;
   }
</style>
</head>
<body>
   <h1>Universal selector (*)</h1>

   <div>Parent element
   <p>Child paragraph 1</p>
   <p>Child paragraph 2</p>
   </div>

   <p>Paragraph 3</p>
</body>
</html>

انتخاب‌گر تو در تو ( Nested Selectors)

انتخاب‌گرهای تو در تو (Nested Selectors) در CSS یک مفهوم بسیار مهم است که به شما امکان می‌دهد عناصر داخلی را در یک ساختار درختی انتخاب کنید و به آن‌ها استایل دهید. با استفاده از این انتخاب‌گرها، می‌توانید عناصر فرزند را بر اساس عناصر والد (بالادستی) آن‌ها مشخص کنید و به صورت دقیق استایل دهی کنید.

زمانی که مرورگر انتخاب‌گرهای تو در تو را تجزیه و تحلیل می‌کند، به صورت خودکار یک فضای سفید بین این انتخاب‌گرها افزوده می‌شود و در نتیجه یک قانون جدید شکل می‌گیرد.
استایل داخلی باید به صورت مستقیم به استایل والد متصل شود (بدون هیچ فضای سفیدی اضافی)، مثل زمانی که از انتخاب‌گرهای شبه-کلاس یا انتخاب‌گرهای ترکیبی استفاده می‌شود، بایدانتخاب‌گر تو در تو (& nesting selector) اضافه شود تا نتیجه مورد نظر به دست آید.
برای معکوس کردن قوانین، می‌توان انتخاب‌گر تو در تو (& nesting selector) را اضافه کرد.
امکان دارد چندین نمونه از انتخاب‌گر تو در تو (& nesting selector) وجود داشته باشد.

در زیر، نحوه استفاده از یک انتخاب‌گر تو در تو (&) به شکل مثال آورده شده است:

<html>
<head>
<style>
   #sample {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 1.5rem;
      & a {
         color: crimson;
         &:hover,
         &:focus {
            color: green;
            background-color: yellow;
         }
      }
   }
</style>
</head>
<body>
   <h1>& nesting selector</h1>
   <p id="sample">
      Hover <a href="#">over the link</a>.
   </p>
</body>
</html>

نحو نگارش - درس قبلی

درس بعدی - جایگاه تعریف در css