illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

CSS Selector هایی که ممکن است درباره‌ی آنها چیزی ندانید! (قسمت اول)

4 3459 ۲۱ آبان ۹۳

به نام خدا

با سلام خدمت شما دوستان سون‌لرنی.

css-selectors

CSS حاوی selector(انتخابگر) های کاربردی و مفیدی هست که برخی افراد درباره‌ی آنها اطلاعاتی ندارند. آموختن درباره‌ی آنها میتواند کار شما را هنگام استایل دادن به صفحات وب بسیار آسان کند. برای مثال شما میتوانید عناصر زوج یا فرد، اول یا آخر، عناصر کناری(sibling) و ... را انتخاب کنید. ما در این مطلب میخواهیم نحوه ی کار با سلکتورهای مختلفی را برسی کنیم، نه سلکتورهای شناخته شده ای مانند ID ، کلاس و ... .

نکته : سلکتورهایی که با علامت :(دونقطه) شروع میشوند شبه کلاس، و عناصری که با علامت ::(دو دونقطه) شروع میشوند شبه عنصر نام دارند.

سطر و حرف اول

  • p:first-letter : انتخاب کننده‌ی اولین سطر یک پاراگراف
  • p:first-letter : انتخاب کننده‌ی اولین حرف

::before و ::after

  • ::before : اضافه کردن یک شبه‌عنصر به ابتدای عنصر کنونی.
  • ::after : اضافه کردن یک شبه‌عنصر به انتهای عنصر کنونی.

نکته مهم در مورد استفاده از این دو شبه‌عنصر این است که حتما باید به این شبه عناصر خاصیت content را اختصاص دهید تا شبه عنصر نمایش پیدا کند. میتواند مقدار این خاصیت را برابر یک کوتیشن خالی بگذارید و یایک متن درون آن بنویسید.

siblings و children

  • body > p : انتخاب کردن تگ‌های p که در اولین زیر محموعه تگ body قرار دارد.
  • h1 + p : انتخاب کردن اولین تگ p که بلافاصله بعد از تگ h1 قرار دارد.(تگ های p و h1 باید در یک طبقه یا سطح باشند.)
  • h1 ~ i : انتخاب کردن تمامی تگ های i که بعد از تگ  h1 وجود دارند.(تگ های i و h1 باید در یک طبقه یا سطح باشند.)

شبه کلاس :target

این سلکتور یکی از جالب ترین سلکتورهای CSS هست.
فرض کنید که کاربر با این آدرس http://example.com/about.html#thebox وارد صفحه شما شده باشد، در اینصورت سلکتور  *:target به عنصری از صفحه که دارای آی‌دی thebox هست اشاره میکند. و شما میتوانید به عنصری از صفحه که دارای آی‌دی thebox هست(درصورت وجود)، استایل‌دهی کنید.

شبه کلاس :nth-child

  • tr:first-child / tr:last-child : انتخاب اولین یا آخرین ردیف.
  • tr:nth-child(odd)   / tr:nth-child(even) : انتخاب ردیف های زوج یا فرد.
  • tr:nth-child(10n-1) : انتخاب ردیف های 9، 19، 29 و ... در یک جدول.
  • tr:nth-child(-n+6) : انتخاب شش ردیف اول در یک جدول.

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

attribute selectors

  • [attr~="value"]a[ title~="flower"] : انتخاب کردن تمامی تگ های a که در خاصیت title آنها کلمه "flower" وجود داشته باشد.
  • [attr*="value"][ class*=" icon-"] : انتخاب کردن عناصری که خاصیت کلاس آنها دارای " icon-" باشد.
  • [attr|="value"][ title|="foo"] : انتخاب کردن تمامی عناصری که خاصیت title آنها با "foo" شروع میشود.
  • [attr^="value"]img[src^="images/"] : انتخاب کردن تمامی تصاویری که آدرس آنها با "images/" شروع میشود.
  • [attr$="value"]a[href$=".html"] : انتخاب کردن تمامی لینک هایی که با آدرس ".html" پایان می‌یابند.

not (به جز)

  • .foo:not(p) : انتخاب کردن تمامی عناصر با کلاس foo که تگ p نباشند.
  • p:not(.bar) : انتخاب کردن تمام پاراگراف ها به جز پاراگراف هایی که کلاس bar دارند.

سخن آخر


CSS دارای سلکتور های فراوانی هست که در این مطلب آورده نشده، برخی از دیگر سلکتورهای CSS را در قسمت بعدی این مطلب معرفی میکنیم. میتوانید تمامی سلکتور های CSS را در W3Schools مشاهده کنید.

موفق باشید.

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    sajjad PARHIZKAR(۲۲ آبان ۱۳۹۳)

    سلام .ممنونم ازشما سایتتون خیلی خوبه. ایول یه سوال دیگه ببخشید من قالب سایتم css بعد حالا میخوام کاربر وارد یه صفحه ای از سایتم که شد اتوماتیک بره به صفحه ی دلخواه حالا باید چه جوری درستش کنم ؟؟؟؟؟؟؟؟کمک کنید. تشکر.

  • ‏‏
    sajjad PARHIZKAR(۲۳ آبان ۱۳۹۳)

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

  • ‏‏

    ممنون از کمکتون ، یه طرح من سر بزنید حتما
    http://insarzamin.ir/

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram