CSS Attribute Selectors

-

في هذه الخاصية يمكن إعطاء style معين ل elements التي لها attributes  محدد او قيمة attribute. 

مثال ذلك :

a> element>: لها attribute باسم target ، يمكن من خلال هذه الخاصية تعيين class ل <a> في صفحة HTML التي لها attribute باسم target

تمام نشوف امثلة كيف ممكن نستخدم هذه الخاصية 

CSS [attribute] Selector

<!DOCTYPE html>
<html>
<head>
<style>
    a {
color: black;
    }
a[target] {
  background-color: rgb(173, 173, 169);
  border: 2 solid darkgray;
  color: black;
  border-radius: 5px;
}
</style>
</head>
<body>
<h2>Apply CSS [attribute] Selector</h2>
<a href="https://www.devkum.com" target="_blank">devkum.com</a>
<a href="https://www.bmw.com/">BMW</a>
<a href="https://www.mercedes-benz.com" >Mercedes</a>
</body>
</html>

لاحظ ان في هذا الكود تم تطبيق class بمواصفات محدده على <a href> التي لها attribute باسم target اما <a href التي ما الها هذا attribute لن يتم تطبيق ها class عليها. 

CSS [attribute="value"] Selector

يمكن تحديد اكثر، مثلا اذا اكان المطلوب تمييز <a href> التي لها target من نوع blank_ وشكل الكود بكون:

a[target =_blank] {
  background-color: rgb(173, 173, 169);
  border: 2 solid darkgray;
  color: black;
  border-radius: 5px;
}

في هذا الحالة يتم التطبيق فقط على <a href> الي الها target من نوع blank_

طبق المثال في صفحة HTML وشوف النتيجة وراسلنا إذا عندك ملاحظات او أسئلة. 


طريقة الكتابة بتكون 

[attribute="value"]
CSS [attribute~="value"] Selector

تستخدم هذ الخاصية مع العلامة ~ لإعطاء خصائص معينة ل elements بناء على قيمة معينة. 

مثلا اذا كان عند List بأنواع السيارات مثلا والمطلوب إعطاء خصاص للسيارات الي  title تبعها بكون BMW ممكن تستخدم هذا الكود.

شوف المثال التالي:


<!DOCTYPE html>
<html>
<head>
<style>
    a {
color: black;
    }
a[target] {
  background-color: rgb(173, 173, 169);
  border: 2 solid darkgray;
  color: black;
  border-radius: 5px;
}
[title~=BMW] {
  border: 1px solid rgb(109, 109, 106);
}
</style>
</head>
<body>
<h2>Apply CSS [attribute] Selector</h2>
<a href="https://www.devkum.com" target="_blank">devkum.com</a>
<a href="https://www.bmw.com/">BMW</a>
<a href="https://www.mercedes-benz.com" >Mercedes</a>
<ul>
<li title="BMW">BMW
    <ul>
        <li title="BMW">BMW 1
        </li>
        <li title="BMW">BMW 2
        </li>
        <li title="BMW">BMW 3
        </li>
    </ul>
</li>
<li>Mercedes</li>
<li>Honda</li>
</ul>
</body>
</html>

شغل الصفحة وشوف النتيجة:


CSS [attribute|="value"] Selector
تستخدم هذ الخاصية مع العلامة =| لإعطاء خصائص معينة ل elements  الي بكون الهم قيمة محدده بالضبط. 
مثلا اذا كان عندنا List بأنواع السيارات مثلا والمطلوب إعطاء خصاص للسيارات الي  عندهم class من BMW ممكن تستخدم هذا الكود.
شوف المثال التالي:

<!DOCTYPE html>
<html>
<head>
<style>
    a {
color: black;
    }
a[target] {
  background-color: rgb(173, 173, 169);
  border: 2 solid darkgray;
  color: black;
  border-radius: 5px;
}
[title~=BMW] {
  border: 1px solid rgb(109, 109, 106);
}
[class|=BMW] {
    border: 2px solid rgb(160, 73, 15);
}
</style>
</head>
<body>
<h2>Apply CSS [attribute] Selector</h2>
<a href="https://www.devkum.com" target="_blank">devkum.com</a>
<a href="https://www.bmw.com/">BMW</a>
<a href="https://www.mercedes-benz.com" >Mercedes</a>
<ul>
<li title="BMW">BMW
    <ul>
        <li class="BMW-Header">BMW 1
        </li>
        <li class="BMW-Footer">BMW 2
        </li>
        <li class="BMWAll">BMW 3
        </li>
    </ul>
</li>
<li>Mercedes</li>
<li>Honda</li>
</ul>
</body>
</html>
في هذا الكود طبقنا class على جميع ال elements الى عندهم class من نوع BMW  بشرط المطابقة التامة . شوف اخر <li> بالرغم ان عندو class باسم BMW الا ان لم يم تطبيق الخصائص عليه. 
شغل الصفحة وشوف النتيجة:
CSS [attribute^="value"] Selector
تستخدم هذ الخاصية مع العلامة^= وهو شبيه في  |= لكن الفرق ان يتم تطبيق الخصائص على element الي بتبدأ بقيمة ميعنه. 
نفس المثال السابق نطبق عليه هذه الخاصية

<!DOCTYPE html>
<html>
<head>
<style>
    a {
color: black;
    }
a[target] {
  background-color: rgb(173, 173, 169);
  border: 2 solid darkgray;
  color: black;
  border-radius: 5px;
}
[title~=BMW] {
  border: 1px solid rgb(109, 109, 106);
}
[class^=BMW] {
    border: 2px solid rgb(160, 73, 15);
}
</style>
</head>
<body>
<h2>Apply CSS [attribute] Selector</h2>
<a href="https://www.devkum.com" target="_blank">devkum.com</a>
<a href="https://www.bmw.com/">BMW</a>
<a href="https://www.mercedes-benz.com" >Mercedes</a>
<ul>
<li title="BMW">BMW
    <ul>
        <li class="BMW-Header">BMW 1
        </li>
        <li class="BMW-Footer">BMW 2
        </li>
        <li class="BMWAll">BMW 3
        </li>
    </ul>
</li>
<li>Mercedes</li>
<li>Honda</li>
</ul>
</body>
</html>
اكيد تلاحظ ان النتيجة تطبيق هذا class على جميع element الي بتبدأ ب BMW

CSS [attribute$="value"] Selector
تستخدم هذ الخاصية مع العلامة$= وهو شبيه في |= لكن الفرق ان يتم تطبيق الخصائص على element الي تنتهي بقيمة ميعنه. 
نفس المثال السابق نطبق عليه هذه الخاصية

<!DOCTYPE html>
<html>
<head>
<style>
    a {
color: black;
    }
a[target] {
  background-color: rgb(173, 173, 169);
  border: 2 solid darkgray;
  color: black;
  border-radius: 5px;
}
[title~=BMW] {
  border: 1px solid rgb(109, 109, 106);
}
[class$=BMW] {
    border: 2px solid rgb(160, 73, 15);
}
</style>
</head>
<body>
<h2>Apply CSS [attribute] Selector</h2>
<a href="https://www.devkum.com" target="_blank">devkum.com</a>
<a href="https://www.bmw.com/">BMW</a>
<a href="https://www.mercedes-benz.com" >Mercedes</a>
<ul>
<li title="BMW">BMW
    <ul>
        <li class="HeaderBMW">BMW 1
        </li>
        <li class="Footer-BMW">BMW 2
        </li>
        <li class="BMWAll">BMW 3
        </li>
    </ul>
</li>
<li>Mercedes</li>
<li>Honda</li>
</ul>
</body>
</html>
طبق المثال في صفحة HTML وراسلنا أذا عندك استفسارات.

CSS [attribute*="value"] Selector

تستخدم هذ الخاصية مع العلامة*= وهو شبيه في |= لكن الفرق ان يتم تطبيق الخصائص على element الي تحتوي قيمة ميعنه. 
نفس المثال السابق نطبق عليه هذه الخاصية

<!DOCTYPE html>
<html>
<head>
<style>
    a {
color: black;
    }
a[target] {
  background-color: rgb(173, 173, 169);
  border: 2 solid darkgray;
  color: black;
  border-radius: 5px;
}
[title~=BMW] {
  border: 1px solid rgb(109, 109, 106);
}
[class*=BM] {
    border: 2px solid rgb(160, 73, 15);
}
</style>
</head>
<body>
<h2>Apply CSS [attribute] Selector</h2>
<a href="https://www.devkum.com" target="_blank">devkum.com</a>
<a href="https://www.bmw.com/">BMW</a>
<a href="https://www.mercedes-benz.com" >Mercedes</a>
<ul>
<li title="BMW">BMW
    <ul>
        <li class="HeaderBMW">BMW 1
        </li>
        <li class="Footer-BMW">BMW 2
        </li>
        <li class="BMWAll">BMW 3
        </li>
        <li class="AllCars">BMW 4
        </li>
    </ul>
</li>
<li>Mercedes</li>
<li>Honda</li>
</ul>
</body>
</html>
النتيجة :