سلکتور های صفات در CSS
یادگیری CSSاستایل دهی به عناصر HTML با صفات بخصوص
استایل دهی به عناصری با صفت یا مقدار بخصوص با استفاده از CSS امکان پذیر است.
سلکتور [attribute]
این سلکتور برای انتخاب عناصری با صفتی بخصوص استفاده می شود. در مثال زیر ، تمام عناصر <a> با صفت target انتخاب می شوند.
مثال :
a[target] {
background-color: yellow;
}
مشاهده مثالسلکتور [attribute="value"]
از این سلکتور برای انتخاب عناصری با صفت مشخص و مقدار بخصوص استفاده می شود. در مثال زیر تمام عناصر <a> با صفت target="_blank" انتخاب می شوند.
مثال :
a[target="_blank"] {
background-color: yellow;
}
مشاهده مثالسلکتور [attribute~="value"]
این سلکتور برای انتخاب عناصری که در مقدار صفت مشخصی از آنها کلمه بخصوصی وجود دارد ، استفاده می شود.
در مثال زیر تمام عناصری که دارای صفت title می باشند و شامل کلماتی می شوند که با فاصله از هم جدا شده اند و یکی از آنها flower باشد ، انتخاب خواهند شد.
نکته ! اگر کلمات بدون فاصله و چسبیده به یک خط تیره مابین آنها باشند ، عنصر مورد نظر انتخاب نخواهد شد.
مثال :
[title~="flower"] {
border: 5px solid yellow;
}
مشاهده مثالسلکتور [attribute|="value"]
این سلکتور برای انتخاب عناصری که مقدار صفت بخصوصی از آنها با کلمه بخصوصی شروع شود ، استفاده می شود. یعنی هم صفت را مشخص می کنیم و هم مقدار را.
در مثال زیر تمام عناصری که دارای صفت class می باشند و مقدار کلاس آنها با top شروع می شوند انتخاب خواهند شد.
نکته ! مقدار مورد نظر باید کلمه کامل حتی به تنهایی (مانند : "class="top) یا کلمه ای که با یک خط تیره ادامه پیدا می کند (مانند "class="top-text) باشد.
مثال :
[class|="top"] {
background: yellow;
}
مشاهده مثالسلکتور [attribute^="value"]
این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها با کلمه بخصوصی شروع شود ، استفاده می شود. یعنی فقط مقدار را مشخص می کنیم و مقدار مورد نظر در ابتدای مقدار هر صفتی که باشد قابل قبول است.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها با کلمه top شروع می شود ، انتخاب می کند.
نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.
مثال :
[class^="top"] {
background: yellow;
}
مشاهده مثالسلکتور [attribute$="value"]
این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها با کلمه بخصوصی پایان می یابد ، استفاده می شود.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها با کلمه top تمام می شود ، انتخاب می کند.
نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.
مثال :
[class$="test"] {
background: yellow;
}
مشاهده مثالسلکتور [attribute*="value"]
این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها حاوی کلمه بخصوصی باشد ، استفاده می شود.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها حاوی کلمه te باشد ، انتخاب می کند.
نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.
مثال :
[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 یاد بگیرید.
نظر شما
>