|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

در صورتی که کلمه عبور خود را بروزرسانی کرده اید با کلمه عبور وارد حساب کاربری خود شوید.

شماره همراه خود را وارد کنید

ورود و ادامه

سلکتور های صفات در 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

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

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

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد