021-20483015

سلکتور های صفات در CSS

استایل دهی به عناصر HTML با صفات بخصوص

استایل دهی به عناصری با صفت یا مقدار بخصوص با استفاده از CSS امکان پذیر است.
 

سلکتور [attribute]

این سلکتور برای انتخاب عناصری با صفتی بخصوص  استفاده می شود. در مثال زیر ، تمام عناصر <a> با صفت target انتخاب می شوند.

مثال :

سلکتور [attribute]
a[target] {
    background-color: yellow;
}
مشاهده مثال

 

سلکتور [attribute="value"]

از این سلکتور برای انتخاب عناصری با صفت مشخص و مقدار بخصوص استفاده می شود. در مثال زیر تمام عناصر <a> با صفت target="_blank" انتخاب می شوند.

مثال :

سلکتور [attribute="value"]
a[target="_blank"] {
    background-color: yellow;
}
مشاهده مثال

 

سلکتور [attribute~="value"]

این سلکتور برای انتخاب عناصری که در مقدار صفت مشخصی از آنها کلمه بخصوصی وجود دارد ، استفاده می شود.

در مثال زیر تمام عناصری که دارای صفت title می باشند و شامل کلماتی می شوند که با فاصله از هم جدا شده اند و یکی از آنها flower  باشد ، انتخاب خواهند شد.

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

مثال :

سلکتور [attribute~="value"]
[title~="flower"] {
    border: 5px solid yellow;
}
مشاهده مثال

 

سلکتور [attribute|="value"]

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

در مثال زیر تمام عناصری که دارای صفت class می باشند و مقدار کلاس آنها با top شروع می شوند انتخاب خواهند شد.

نکته ! مقدار مورد نظر باید کلمه کامل حتی به تنهایی (مانند : "class="top) یا کلمه ای که با یک خط تیره ادامه پیدا می کند (مانند "class="top-text) باشد.

مثال :

سلکتور [attribute|="value"]
[class|="top"] {
    background: yellow;
}
مشاهده مثال

 

سلکتور [attribute^="value"]

این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها با کلمه بخصوصی شروع شود ، استفاده می شود. یعنی فقط مقدار را مشخص می کنیم و مقدار مورد نظر در ابتدای مقدار هر صفتی که باشد قابل قبول است.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها با کلمه top شروع می شود ، انتخاب می کند.
نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.

مثال :

سلکتور [attribute^="value"]
[class^="top"] {
    background: yellow;
}
مشاهده مثال

 

سلکتور [attribute$="value"]

این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها با کلمه بخصوصی پایان می یابد ، استفاده می شود.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها با کلمه top تمام می شود ، انتخاب می کند.

نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.

مثال :

سلکتور [attribute$="value"]
[class$="test"] {
    background: yellow;
}
مشاهده مثال

 

سلکتور [attribute*="value"]

این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها حاوی کلمه بخصوصی باشد ، استفاده می شود.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها حاوی کلمه te باشد ، انتخاب می کند.

نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.

مثال :

سلکتور attribute value
[class*="te"] {
    background: yellow;
}
مشاهده مثال

 

استایل دهی به فرم ها

سلکتور های صفات این امکان را فراهم می کند تا بدون استفاده از class یا id ، فرم ها را بر اساس استایل دلخواه تنظیم کنیم.

مثال :

استایل دهی به فرم ها
input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
مشاهده مثال



نکته ! درس مربوط به فرم ها در CSS را مشاهده کنید تا با مثال های بیشتری درباره استایل دهی فرم های با CSS یاد بگیرید.

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط