شبه عناصر

پادکست CSS - 014: شبه عناصر

اگر مقاله‌ای از محتوا دارید و می‌خواهید حرف اول یک مقدار بسیار بزرگ‌تر باشد – چگونه به آن می‌رسید؟

در CSS می توانید از شبه عنصر ::first-letter برای دستیابی به این نوع جزئیات طراحی استفاده کنید.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

شبه عنصر مانند افزودن یا هدف قرار دادن یک عنصر اضافی بدون نیاز به افزودن HTML بیشتر است. این راه حل مثال با استفاده از ::first-letter یکی از شبه عناصر بسیار است. آنها طیف وسیعی از نقش ها را دارند و در این درس شما می خواهید یاد بگیرید که کدام شبه عناصر موجود هستند و چگونه می توانید از آنها استفاده کنید.

::before و ::after

هر دو عنصر شبه ::before و ::after تنها در صورتی یک عنصر فرزند را در داخل یک عنصر ایجاد می کنند که یک ویژگی content تعریف کنید.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content می تواند هر رشته ای باشد - حتی یک رشته خالی - اما توجه داشته باشید که هر چیزی غیر از یک رشته خالی احتمالاً توسط یک صفحه خوان اعلام می شود. شما می توانید یک url تصویر اضافه کنید، که یک تصویر را در ابعاد اصلی آن درج می کند، بنابراین نمی توانید اندازه آن را تغییر دهید. شما همچنین می توانید یک counter وارد کنید.

هنگامی که یک عنصر ::before یا ::after ایجاد شد، می توانید آن را هر طور که می خواهید بدون محدودیت استایل دهید. شما فقط می توانید یک عنصر ::before یا ::after را به عنصری وارد کنید که عناصر فرزند ( عناصر دارای درخت سند ) را می پذیرد، بنابراین عناصری مانند <img /> ، <video> و <input> کار نخواهند کرد.

::first-letter

ما در ابتدای درس با این شبه عنصر آشنا شدیم. شایان ذکر است که نمی توان از تمام ویژگی های CSS هنگام هدف گیری ::first-letter استفاده کرد. املاک موجود عبارتند از:

• color
• ویژگی های background (مانند background-image )
• ویژگی های border (مانند border-color )
• float
• ویژگی های font (مانند font-size و font-weight )
• ویژگی های متن (مانند text-decoration و word-spacing )

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

شبه عنصر ::first-line فقط در صورتی به شما امکان می دهد که خط اول متن را استایل دهید که عنصر با ::first-line اعمال شده دارای مقدار display block ، inline-block ، list-item ، table-caption یا table-cell .

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

مانند شبه عنصر ::first-letter ، فقط زیر مجموعه ای از ویژگی های CSS وجود دارد که می توانید استفاده کنید:

• color
• ویژگی های background
• ویژگی های font
• ویژگی های text

::backdrop

اگر عنصری دارید که در حالت تمام صفحه ارائه می‌شود، مانند <dialog> یا <video> ، می‌توانید پس‌زمینه (فضای بین عنصر و بقیه صفحه) را با ::backdrop شبه استایل دهید. عنصر:

video::backdrop {
  background-color: goldenrod;
}

::marker

شبه عنصر ::marker به شما امکان می دهد گلوله یا عدد را برای یک آیتم لیست یا فلش عنصر <summary> استایل دهید.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

فقط یک زیر مجموعه کوچک از خصوصیات CSS برای ::marker :

• color
• content
• white-space
• ویژگی های font
• ویژگی های animation و transition

با استفاده از ویژگی content می توانید نماد نشانگر را تغییر دهید. برای مثال می توانید از این برای تنظیم یک علامت مثبت و منفی برای حالت های بسته و خالی یک عنصر <summary> استفاده کنید.

::selection

شبه عنصر ::selection به شما امکان می دهد تا به نحوه ظاهر متن انتخاب شده استایل دهید.

::selection {
  background: green;
  color: white;
}

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

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

مانند سایر شبه عناصر، تنها زیر مجموعه ای از ویژگی های CSS مجاز است:

• color
• background-color اما background-image نیست
• ویژگی های text

::placeholder

شما می توانید یک راهنمایی کمکی برای تشکیل عناصر، مانند <input> با ویژگی placeholder اضافه کنید. شبه عنصر ::placeholder به شما امکان می دهد به آن متن استایل دهید.

input::placeholder {
  color: darkcyan;
}

::placeholder فقط زیرمجموعه ای از قوانین CSS را پشتیبانی می کند:

• color
• ویژگی های background
• ویژگی های font
• ویژگی های text

::cue

آخرین مورد در این تور از شبه عناصر، شبه عنصر ::cue است. این به شما امکان می‌دهد تا به نشانه‌های WebVTT، که زیرنویس عنصر <video> هستند، استایل دهید.

شما همچنین می توانید یک انتخابگر را به یک ::cue ، که به شما امکان می دهد عناصر خاصی را در داخل یک عنوان استایل دهید.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

درک خود را بررسی کنید

دانش خود را از شبه عناصر آزمایش کنید