آموزش CSS – آشنایی با تعدادی از Selector های سی اس اس (CSS) (جلسه ۹)

آشنایی با Descendant Selector ها در سی اس اس (CSS)

آشنایی با Child Selector ها در سی اس اس (CSS)

آشنایی با Adjacent Selector ها در سی اس اس (CSS)

آشنایی با Attribute Selector ها در سی اس اس (CSS)

 

آشنایی با Descendant Selector ها در سی اس اس (CSS)

گاهی اوقات نیاز داریم تا مثلاً فقط تگ های <p> را که داخل تگ <div> هستند را هدف قرار دهیم. برای این کار می بایست از مفهومی تحت عنوان Descendant Selector استفاده کنیم. برای روشن شدن این موضوع کد سی اس اس (CSS) زیر را مد نظر قرار می دهیم:

div p {
   color:#00ff00;
   font-size:20px;
}

همانطور که می بینیم ابتدا کلید واژه div را نوشته سپس یک فاصله قرار داده و کلیدواژه p را می نویسیم ( اگر خاطرمان باشد پیش از این گفتیم که کدهای سی اس اس (CSS) در موارد خاصی به فاصله حساس هستند که در اینجا یک مورد از آن ها را می بینیم. به عبارت دیگر اگر فاصله مابین div و p را حذف کنیم عملکرد مورد انتظار مشاهده نخواهد شد).
از این پس هر تگ <p> که داخل تگ <div> باشد به رنگ سبز در آمده و اندازه آن هم ۲۰ پیکسل خواهد شد. برای روشن شدن این مسئله کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>asrefonon</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
     
    <body>
        <p>استفاده از کلاس در کدهای اچ تی ام ال</p>
        <br/>
        <div>
            <p>پاراگرافی که داخل تگ دیو قرار دارد</p>
        </div>
    </body>
</html>

در کد فوق می بینیم که دو تگ <p> داریم که یکی از آن ها داخل تگ <div> قرار گرفته است. حال با آگاهی از کدهای سی اس اس خود این انتظار می رود که فقط پاراگراف داخل تگ <div> تحت تاثیر استایل ها قرار گیرد. برای روشن شدن این موضوع فایل خود را در مرورگر اجرا می کنیم:

using_element_selectors_in_div_in_css

آشنایی با Child Selector ها در سی اس اس

Child Selector ها همانند Descendant Selector ها هستند. همانطور که پیش از این گفتیم Descendant Selector ها کلیه تگ های فرزند را تحت تاثیر قرار می دهند اما این در حالی است که Child Selector ها صرفاً تگ هایی را تحت تاثیر قرار می دهند که به طور مستقیم فرزند تگ دیگری هستند. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <aside>
           <p>P inside aside</p>
           <nav>
                   <p>P inside nav</p>
           </nav>
       </aside>
   </body>
</html>

همانطور که در تصویر فوق می بینیم داخل تگ <body> یک تگ <aside> قرار داده و داخل آن یک تگ <p> و یک تگ <nav> قرار داده ایم. سپس داخل تگ <nav> یک تگ پاراگراف دیگر قرار داده ایم. حال با استفاده از مفهومی تحت عنوان Descendant Selector اقدام به نوشتن کدهای سی اس اس (CSS) می نماییم:

aside p {
   color:red;
}

می بینیم که ابتدا Selector یی تحت عنوان aside را نوشته و پس از قرار دادن یک فاصله p را نوشته ایم. با این کار به مرورگر دستور می دهیم که رنگ هر تگ <p> که داخل تگ <aside> قرار دارد را به رنگ قرمز تبدیل کند. حال فایل خود را داخل مرورگر اجرا می کنیم:

xchild_selector_in_css

می بینیم که هر دو تگ <p> به رنگ قرمز در آمده اند و این در حالی است که یکی از تگ های پاراگراف به طور مستقیم داخل تگ <aside> قرار دارد و یکی دیگر به طور غیر مستقیم داخل تگ <aside> قرار دارد. به عبارت دیگر تگ دوم ابتدا داخل یک تگ <nav> قرار گرفته و آن تگ <nav> داخل تگ <aside> قرار دارد.
حال فرض کنیم که قصد داریم فقط و فقط تگ پاراگرافی که به طور مستقیم داخل تگ <aside> قرار دارد را هدف قرار دهیم. به عبارت دیگر تگی که حاوی عبارت P inside aside است را فقط می خواهیم به رنگ قرمز در آوریم. برای این منظور کدهای سی اس اس فوق را به صورت زیر بازنویسی می کنیم:

aside > p {
   color:red;
}

همانطور که می بینیم با قرار دادن یک علامت < مابین Selector های aside و p این دستور را می دهیم که فقط و فقط تگ p که به طور مستقیم داخل تگ <aside> قرار دارد را هدف قرار دهیم:

xchild_selector_in_css2

می بینیم که فقط تگی که حاوی عبارت P inside nav بود به رنگ قرمز در آمده است.

 

آشنایی با Adjacent Selector ها در سی اس اس (CSS)

گاهی اوقات در طراحی صفحات وب برای طراح یا برنامه نویس پیش می آید که نیاز دارد فقط تگ هایی که پس یک تگ خاص قرار می گیرند را مد نظر قرار دهد. در چنین مواقعی می بایست از مفهومی تحت عنوان Adjacent Selector استفاده کنیم. برای روشن شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <h4>Heading h4</h4>
       <p>Paragraph after h4</p>
       <h4>Heading h4</h4>
       <h5>Heading h5</h5>
       <p>Paragraph after h5</p>
   </body>
</html>

کاری که در کد فوق انجام داده ایم این است که داخل تگ <body> یک تگ <h4> قرار داده و بلافاصله پس از آن یک پاراگراف قرار داده ایم. سپس یک تگ <h4> دیگر قرار داده و پس از آن یک تگ <h5> قرار داده و در نهایت یک تگ پاراگراف قرار داده ایم. حال قصد داریم تا با استفاده از کدهای سی اس اس (CSS) فقط پاراگراف هایی را هدف قرار دهیم که بلافاصله بعد از تگ <h4> قرار گرفته اند. از اینرو صرفا تگ پاراگراف اول مد نظر قرار داده می شود چرا که در ارتباط با تگ پاراگراف دوم بایستی گفت که مابین تگ پاراگراف دوم و تگ <h4> یک تگ دیگر تحت عنوان <h5> قرار دارد. برای نوشتن کدهای سی اس اس (CSS) به صورت زیر عمل می کنیم:

h4 + p{
   font-style:italic;
   color:navy;
}

همانطور که در کد فوق می بینیم ابتدا Selector یی تحت عنوان h4 را نوشته و یک علامت به علاوه قرار می دهیم و بلافاصله Selector یی تحت عنوان p را می نویسیم. از این پس هر کدی که داخل Declaration قرار گیرد به پاراگراف هایی اختصاص داده می شود که بلافاصله پس از تگ <h4> قرار گیرند:

xadjacent_selectors_in_css

می بینیم که پاراگراف دومی که مابین آن و تگ <h4> تگ دیگری تحت عنوان <h5> قرار گرفته است تحت تاثیر کدهای سی اس اس (CSS) قرار نگرفته است.

 

آشنایی با Attribute Selector ها در سی اس اس (CSS)

Attribute Selector ها این امکان را به برنامه نویسان می دهند تا بتوانند از طریق Attribute ها و یا مقادیر در نظر گرفته شده برای آنها، تگ های اچ تی ام ال (HTML) را هدف قرار دهند. این نوع از Selector ها تا حدودی پیچیده تر از مابقی Selector ها می باشند از اینرو توجه به مراتب بیشتری به این Selector ها می بایست داشته باشیم. برای آشنایی با مفهوم Attribute Selector ها، ابتدا کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p><a href="http://www.google.com/" title="visit google.com">Go to google</a></p>
       <p><a href="index.html">Go Home</a></p>
       <p class="red blue">This paragraph has classes red and blue</p>
       <p class="red">This paragraph has class red</p>
   </body>
</html>

همانطور که در کد فوق می بینیم، داخل تگ <body> چهار تگ پاراگراف نوشته ایم که دو تگ اول لینک هستند و دو تگ دومی پاراگراف هایی هستند از نوع معمولی. نکته ای که در ارتباط با پاراگراف سوم وجود دارد این است که برای این پاراگراف دو class را در نظر گرفته ایم. در واقع هر زمانیکه بخواهیم بیش از یک class را به تگی اختصاص دهیم صرفاً نیاز است تا داخل دو علامت ”  ” نام class ها خود را با اختصاص یک فاصله یکی پس از دیگری بنویسیم.
در ادامه کدهای سی اس اس (CSS) خود را به شکل زیر وارد ویراشگر متن می کنیم:

a[title]{
   color:red;
}

همانطور که می بینیم Selector یی تحت عنوان a را نوشته سپس علامت های [  ] را مقابل آن می نویسیم. حال هر آنچه که داخل علامت های [   ] نوشته شود هدف قرار داده می شود. با نوشتن عبارت title این دستور را می دهیم که هر لینکی که دارای Attribute یی تحت عنوان title بود را هدف قرار داده شود. می بینیم که قصد داریم لینک های هدف را به رنگ قرمز در آوریم. فایل خود را داخل مرورگر اجرا می کنیم:

xattribute_selector_i1n_css

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

a[title="visit google.com"]{
   color:red;
}

همانطور که در کد فوق می بینیم داخل علامت های [   ] برای title مقداری در نظر می گیریم که این مقدار می بایست دقیقاً مشابه مقدار title یی باشد که در لینک آمده است (لازم به ذکر است که حروف بزرگ و کوچک هم مهم هستند). از این پس هر لینکی که دارای Attribute یی تحت عنوان title باشد و مقدار آن هم برابر با visit google.com باشد به رنگ قرمز در خواهد آمد.
حال فرض کنیم پاراگرافی که حاوی کلاسی تحت عنوان red است را می خواهیم هدف قرار دهیم. برای این منظور کد فوق را به صورت زیر بازنویسی می کنیم:

p[class="red"]{
   color:red;
}

همانطور که می بینیم داخل فایل سی اس اس نام Attribute تحت عنوان p را نوشته سپس علامت [  ] را داخل آن می نویسیم و داخل این علامت کلید واژه class را نوشته و مقدار آن را برابر با نام class مد نظر قرار می دهیم. از این پس هر پاراگرافی که حاوی کلاس red باشد به رنگ قرمز در خواهد آمد:

xattribute_selector_in_css22

می بینیم پاراگرافی که حاوی کلاس red بود هدف قرار داده شد.
همانطور که از کد اچ تی ام ال مشخض است، پاراگراف دیگری داریم که حاوی دو کلاس red و blue است اما این در حالی است که این پاراگراف هدف قرار داده نشده است. برای اینکه تگ هایی را هم که علاوه بر کلاس red دارای کلاس های دیگر می باشند را نیز هدف قرار دهیم، می بایست کد فوق را به صورت زیر تکمیل کنیم:

p[class~="red"]{
   color:red;
}

همانطور که می بینیم پیش از علامت مساوی علامت ~ که اصطلاحاً “تیلدا” نامیده می شود قرار داده ایم. حال مرورگر خود را به روز رسانی می کنیم:

xattribute_selector_in_css3

می بینیم که هر دو عبارت به رنگ قرمز در آمده اند. در واقع با قرار دادن علامت  ~ این دستور را می دهیم که هر تگی که دارای کلاس red بود را مد نظر قرار دهد (لازم به ذکر است که برای تایپ علامت ~ می بایست دکمه Shift را پایین نگه داشته و دکمه ای که در کنار عدد ۱ است را فشار دهیم).
حال مجدد تگ های لینک را هدف قرار می دهیم. برای این منظور کد فوق را به صورت زیر بازنویسی می کنیم:

a[href^="http://"]{
   color:red;
}

پس از ذخیره کردن فایل مرورگر را به روز رسانی می کنیم:

x4_attribute_selector_in_css.jpg.pagespeed.ic.eLemBUnlsM

می بینیم که مجدد لینک اول هدف قرار داده می شود. در واقع با نوشتن کد فوق این دستور را می دهیم که مرورگر به دنبال کلیه href ها بگردد و آنهایی را انتخاب کند که با عبارت //:http شروع می شوند (لازم به ذکر است که برای تایپ علامت ^ می بایست دکمه Shift را پایین نگه داشته و دکمه ۶ را فشار دهیم).
حال کد فوق را به صورت زیر بازنویسی می کنیم:

a[href$="com/"]{
   color:red;
}

با قرار دادن علامت $ پس از href این دستور را به مرورگر می دهیم تا لینک هایی را هدف قرار دهد که به /com ختم شوند.
حال برای آنکه بتوانیم به دنبال یک کلمه داخل لینک بگردیم می بایست کد فوق را به صورت زیر بازنوسی کنیم:

a[title*="visit"]{
   color:red;
}

کاری که انجام خواهد شد این است که کلیه title های جستجو شده و آن هایی که حاوی عبارت visit هستند هدف قرار داده می شوند (برای تایپ علامت * می توان با پایین نگه داشتن دکمه Shift دکمه ۸ را فشار داد).

 

این هم از  آشنایی با تعدادی از Selector های سی اس اس (CSS)

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

توسط
تومان