ویژگی انتخابگرهای CSS

انتخاب کنندگان ویژگی CSS عناصر را با توجه به ویژگی ها و مقادیر آن ها هدف قرار می دهند. آن ها به صورت پیش فرض به حروف کوچک و بزرگ حساس هستند ، به این معنی که CSS به دنبال تطابق دقیق است.

انواع ویژگی انتخابگرهای CSS

• انواع مختلفی از انتخابگرهای CSS برای عناصر یک ظاهر طراحی شده با ویژگی های خاص وجود دارد.
• هدف قرار دادن عناصر فقط بر اساس ویژگی آن ها.
• هدف قرار دادن عناصر بر اساس ویژگی و مقدار دقیق آن ها.
• هدف قرار دادن عناصر بر اساس ویژگی و کلمه دقیق آن ها (ممکن است توسط فضای سفید از هم جدا شوند).
• هدف قرار دادن عناصر بر اساس ویژگی و مقدار دقیق آن ها (یا مقداری که به دنبال آنها یک خط خط است).
• هدف قرار دادن عناصر بر اساس ویژگی آنها و ارزش آن ها دارای پیشوند از مقدار دقیق است.
• هدف قرار دادن عناصر بر اساس ویژگی آنها و ارزش آن ها دارای پسوند مقدار دقیق است.
• هدف قرار دادن عناصر بر اساس ویژگی آن ها و ارزش آن ها حداقل یک بار دارای ارزش دقیق است.
• افزودن i یا I باعث کوچک بودن جستجو در جستجو می شود.
• افزودن s یا S باعث می شود جستجو به حروف کوچک بزرگ حساس شود.

[ویژگی] انتخاب کننده در Css

انتخابگر [ویژگی] CSS برای تطبیق عناصر HTML با یک ویژگی خاص است. بنابراین ، ارزش مهم نیست.

مثال زیر هر عنصر <a> با مشخصه [href] در پرونده HTML ما را انتخاب می کند:

a[href] {    
    background-color: blue;
}

[attribute = “value”] انتخاب کننده در CSS

انتخابگر [attribute = "value"] برای انتخاب عناصر HTML با ویژگی و مقدار مشخص است. این انتخابگر ویژگی فقط عناصر دارای یک نام و مشخصه مقدار دقیق را سبک می کند.

مثال زیر هر عنصر <a> با [href = "#"] را در پرونده HTML ما انتخاب می کند:

a[href="#"] {
    background-color: blue;
}

[مشخصه ~ = “مقدار”] انتخاب کننده CSS

انتخابگر CSS [ویژگی ~ = "مقدار"] عناصری را با یک ویژگی پیدا می کند که حاوی یک کلمه خاص است (صرف نظر از قرارگیری آن در نام کامل).

مثال زیر عناصر سبک را نشان می دهد که دارای ویژگی عنوان هستند و دارای یک لیست جدا شده از فضای سفید با کلمه doggo هستند:

[title~="doggo"] {    
    border: 10px solid blue;
}

CSS [مشخصه | = “مقدار”] انتخابگر

انتخابگر [ویژگی | = "مقدار"] با هر عنصری که دارای ویژگی مشخصی باشد که با مقدار مشخص شده شروع می شود مطابقت دارد (یک خط می تواند آن را دنبال کند).

مثال زیر هر عنصری را که دارای یک مقدار ویژگی کلاس باشد ، سبک می کند که با سبک شروع می شود:

[class|="style"] {    
    background: blue;
}

CSS [ویژگی ^ = “مقدار”] انتخابگر

[مشخصه ^ = "مقدار"] ویژگی عناصر سبک را که دارای ویژگی مشخص شده است ، سبک می کند و با مقدار مشخص شده شروع می شود.

مثال زیر هر عنصری را انتخاب می کند که دارای یک مقدار ویژگی کلاس باشد که با سبک شروع می شود:

[class^="style"] {    
    background: blue;
}

CSS [مشخصه $ = “value”] انتخاب کننده

[صفت $ = "value"] برای عناصر یک ظاهر طراحی شده است که دارای ویژگی خاصی هستند که با یک مقدار مشخص پایان می یابد. آخرین کلمه از ویژگی باید با کلمه کلیدی توصیف شده در انتخاب مطابقت داشته باشد.

مثال زیر هر عنصری را انتخاب می کند که دارای یک مقدار ویژگی کلاس باشد که با سبک پایان می یابد:

[class$="style"] {    
    background: blue;
}

CSS [مشخصه * = “مقدار”] انتخابگر

انتخابگر [ویژگی * = "مقدار"] عناصری را پیدا می کند که دارای کلمه کلیدی مشخص شده در هر نقطه از مقدار ویژگی باشند.

مثال زیر هر عنصری را انتخاب می کند که دارای یک مقدار ویژگی کلاس باشد که شامل سبک در هر نقطه از رشته است:

[class*="style"] {    
    background: blue;
}

یک ظاهر طراحی شده حساس به مورد

می توان از ویژگی انتخابگر CSS برای انجام تطبیق مورد حساسیت کوچک استفاده کرد.

مثال زیر ما برای سبک دادن به همه عناصر <div> با کلاس مثال (بدون در نظر گرفتن نحوه نوشتن مثال) i را اضافه می کنیم:

div[class="example" i] {
  color: green;
  background-color: antiquewhite;
}

تطبیق عناصر با انتخابگرهای ویژگی

همانند سایر انتخابگرهای معمولی CSS ، می توانید از هر خاصیت یک ظاهر طراحی با ویژگی های CSS استفاده کنید.

در مثال زیر ، ما چند سبک را برای عناصر HTML انتخاب شده خود اعمال می کنیم:

input[type="text"] {
   width: 120px;
   display: block;
   margin-bottom: 20px;
   background-color: blue;  
}  

input[type="button"] {
   width: 100px;
  margin-left: 25px;
  display: block;  
}

نکات مفید CSS Attribute Selector:

• ترکیب انتخابگر ویژگی CSS با انتخابگرهای کلاس ، تگ یا شناسه امکان پذیر است.
• هدف قرار دادن عناصر ورودی که معمولاً مقادیر زیادی دارند که باید به گونه ای متفاوت طراحی شوند بسیار معمول است.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.