آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش سلکتورهای اتریبیوت در CSS

دوره های مرتبط با این مقاله

گزینشگر های صفت(attribute selector)

سبک دهی به عناصر HTML با استفاده از خصیصه های ویژه:
این امکان وجود دارد که المان های HTML ی که دارای صفت مشخصه (Attribute) یا مقادیر attribute خاص هستند را سبک دهی کرد (به آن ها style اعمال کرد) .
توجه : IE7 و IE8 هر دو تنها زمانی توانایی پشتیبانی از گزینشگرهای صفت را دارند که یک !DOCTYPE برای آن تعریف شده باشد .

گزینشگر صفت CSS

از این گزنیشگر ([attribute] Selector) برای انتخاب عناصری استفاده می شود که دارای خصیصه (Attribute) خاصی باشند .
به عنوان مثال، نمونه ی زیر تمامی المان های a را که دارای خصیصه ی مورد نظر هستند، انتخاب می کند .

نمونه یک

    
امتحان کنید

گزینشگر صفت = مقدار CSS

این گزینشگر به منظور انتخاب المان هایی با خصیصه و مقدار مشخص شده بکار می رود .
مثال ذیل تمامی تگ های a که خصیصه ی target="_blank" را دارند گزینش می کند :

نمونه دو

        a[target=_blank] {
            background-color: yellow;
        }
امتحان کنید

گزینشگر مقدار ~=خصیصه CSS

گزینشگر ذکر شده به منظور انتخاب المان هایی بکار می رود که مقدار attribute آن دربردارنده ی کلمه ی مشخص شده باشد .
مثال زیر تمامی المان هایی که خصیصه ی title آن دربردارنده ی لیستی از کلمات جدا شده توسط خط فاصله باشند (که یکی از آن ها "flower" می باشد) را گزینش می کند :

نمونه سه

        [title~=flower] {
            border: 5px solid yellow;
        }
امتحان کنید

مثال فوق با المان هایی که عنوان title) ( آن title="flower"، title="summer flower" ، title="flower new" و نه title="my-flower" title="flowers" است مطابقت داشته و مچ می شود .

گزینشگر خصیصه|=مقدار در CSS

گزینشگر فوق برای انتخاب آن دسته از عناصری بکار می رود که خصیصه ی مشخص شده آن با مقدار مشخص شده و مورنظر آغاز گردد.
مثال زیر تمامی المان هایی که مقدار attribute کلاس آن با واژه ی "top" آغاز می گردد را انتخاب می کند :
توجه : دقت داشته باشید که مقدار مورد نظر باید حتماً یک واژه ی کامل باشد، یا تنها و به خودی خود مانند class="top" باشد و یا یک خط ربط (-) به دنبال آن قرار گیرد، درست مانند این مثال class="top-text" :

نمونه چهار

        [class|=top] {
            background: yellow;
        }
امتحان کنید

گزینشگر خصیصه^=مقدار در CSS

این انتخابگر به منظور گزینش عناصری بکار می رود که مقدار attribute یا صفت مشخصه ی آن با مقدار تعریف شده آغاز گردد .
مثال زیر تمامی المان هایی که مقدار attribute کلاس آن با "top" آغاز می گردد را انتخاب می کند :

توجه:

مقدار نباید لزوماً یک واژه ی یا کلمه ی کامل باشد .

نمونه پنج

        [class^="top"] {
            background: yellow;
        }
امتحان کنید

گزینشگر [attribute$=value] در CSS

این انتخابگر برای گزینش المان هایی بکار می رود که مقدار attribute آن با مقدار مشخصی پایان می یابد .
به عنوان مثال نمونه ی زیر کلیه ی المان هایی که مقدار attribute کلاس آن با واژه ی "test" خاتمه می یابد را انتخاب می کند .

توجه:

مقدار لزوماً نباید یک واژه ی کامل باشد .

نمونه شش

        [class$="test"] {
            background: yellow;
        }
امتحان کنید

گزینشگر [attribute*=value] و کاربرد آن در CSS

انتخابگر [خصیصه*=مقدار] ویژه ی گزینش آن دسته از مقادیری بکار می رود که مقدار attribute آن دربردارنده ی مقدار مشخصی باشد .
مثال زیر کلیه ی المان هایی که مقدار attribute کلاس آن دربردارنده ی "te" می باشد را گزنیش می کند .

توجه:

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

نمونه هفت

        [class*="te"] {
            background: yellow;
        }
امتحان کنید

سبک دهی به فرم
گزینشگر صفت می تواند در سبک دهی به فرم بدون کلاس یا شناسه (ID) بسیار کارامد عمل کند :

نمونه هشت

        input[type=text] {
            width: 150px;
            display: block;
            margin-bottom: 10px;
            background-color:#f610ea;
        }
        input[type=button] {
            width: 120px;
            margin-left: 35px;
            display: block;
        }
امتحان کنید
  • 3685
  •    2158
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .