آموزش سلکتورهای اتریبیوت در 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;
        }