Basic CSS Selectors
Document එකක ඇති HTML elements තෝරා ගැනීමට basic selectors සහ selector patterns කිහිපයක් CSS හි ඇත.
- *ලකුණ මගින් — මෙමගින් document body හි ඇති සියලුම elements select කර ගත හැක. උදා:- * { } මගින් document එක තුල ඇති සියලුම elements select වේ.
<html lang="en">
<head>
<style>
* {
color: teal;
border:2px solid black;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<div><span>My CSS</span></div>
<p>Second paragraph.</p>
</body>
</html>
2. “class” attribute මගින් — HTML element වල class attribute හි value මගින් select කර ගන්න පුළුවන්. මෙහිදී “.class_value” ලෙස period (.) character සමග “class_value” එක භාවිතා කරයි. මෙමගින්, සමාන ලෙස හැඩවන හෝ හැසිරෙන HTML elements කිහිපයක් එකවර select කර ගත හැක. උදා:- (.para1) — class=”para1” සහිත සියලුම elements select වේ.
3. “id” attribute මගින් — HTML element එකක id attribute හි value එක මගින් select කරගන්න අවශ්‍ය විට “#id_value” ලෙස භාවිතා කල හැක. උදා:- #para1මගින් id=”para1” සහිත element එක select කර ගන්න පුළුවන්.
4. Element name මගින් — අප විසින් භාවිතා කරන element name එකට අයත් සියලු elements select කර ගන්න පුළුවන්. උදා:- p මගින් සියලුම paragraph elements select වේ.
5. [attribute] මගින් — නම් කරන attribute එක සහිත සියලුම elements select කර ගත හැක. Attribute ට ලබා දී ඇති value එක මෙම තෝරා ගැනීමට බලපෑමක් නොකරයි. උදා:- [name] — “name” attribute එක සදහන් කර ඇති සියලුම elements select වේ.
6. [attribute = value] මගින් — නම් කරන ලද attribute එකක් සහ value එකක් සහිත elements තෝරා ගත හැක. උදා:- a[name=”para2”] — name attribute එකට “para2” value එක යොදා ඇති සියලුම <a> elements.
මෙම මුලික selectors යම් යම් patterns වලට combine කරලා ත් අපිට documnet එකේ elements select කර ගන්න පුළුවන්. 🤳
7. “selector1selector2……” ලෙස යොදාගත් විට එම selectors සියල්ලම එකට යොදා ඇති (selector1 and selector2) HTML elements පමණක් select කර ගත හැකි වේ. උදා:- .para1[id]{ } මගින් class=”para1” හා id attribute එක භාවිතා කර ඇති elements select වේ.
8. ඉහත selectors අතර space නොයොදන අතර spcae යෙදු විට (“selector1 selector2” ලෙස) selector1 සහිත parent element එක යටතේ තිබෙන selector2 සහිත child elements select කර ගන්න පුළුවන්. උදා:- #div1 .para2 { } ලෙස භාවිතා කල විට id=”div1" වන element එක parent කරගෙන ඇති class=”para2" සහිත සියලුම child or grand child element select කර ගත හැක.
9. මෙම selectors දෙක අතරට “,” (comma) ලකුණ යෙදුවිට, spaces තිබුනත් නැතත් selector1 or selectro2 ලෙස එම selector එකක් හෝ සහිත elements සියල්ල select කර ගත හැක.
10. selector1 > selector2 මගින් — selector1 සහිත elements direct parent වන selector2 සහිත සියලුම child element සියල්ල select කර ගත හැක. උදා:- div > p මගින් <div> element එකක් කෙලින්ම parent වන සියලුම <p> elements select වේ.
11. selector1+ selector2 මගින් — selector1 ට පසුව පළමුවෙන්ම හමුවන (adjacent sibling) element එක තුල selector 2 තිබේ නම් එය select කර ගත හැක. උදා:- #div1 + .para2 මගින් <div id=”div1"> element එකක් අවසානයේ පළමුවෙන්ම හමුවන element එකේ class= “para2” ලෙස ඇත්නම් පමණක් select වේ. එසේ හමුවන පළමු element එක තුල class= “para2” නැත්නම් ඊළගට හමුවන element තුල class= “para2” තිබුනාට ඒවා select වෙන්නේ නැත.
12. selector1~ selector2 මගින් — selector1 ට පසුව හමුවන සියලුම selector2 elements select කර ගත හැක. නමුත් ඒවා selector1අයත් වන parent element එකටම යටත් විය යුතුය.
13. [attribute~=value] මගින් — නම් කරන ලද attribute එකෙහි value එක තුල මෙම selector එක මගින් සොයන value එක අන්තර්ගත වූ elements සොයා ගත හැක. උදා: [title~=flower] — “title” attribute හි “flower” යන වචනය අන්තර්ගත සියලුම elements.
14. [attribute|=value] මගින් — නම් කරන ලද attribute එකෙහි value එක ආරම්භ වන්නේ මෙම selector එක සොයන value එකට සමානව හෝ “-” සමග ඊට පසු තවත් values සමග තිබෙන attributes සොයා ගැනීමට පුළුවන්. උදා: [lang|=en] — “lang” attribute එකේ value එක ලෙස lang=”en” හෝ lang=”en-us” වැනි අගයන් තිබෙන elements.
15. [attribute^=value] මගින් — නම් කරන ලද attribute එකෙහි value එක ආරම්භ වන්නේ සොයන value එක සමග වන ඕනෑම element එකක් සොයා ගත හැක. උදා: [class^=”pa”] — “class” attribute හි value එක ආරම්භ වන්නේ ‘pa’ මුල කරගෙන වන class=”para1”, class=”para-2” හෝ class=”paragraph” වැනි values සහිත elements.
16. [attribute$=value] මගින් — නම් කරන ලද attribute එකෙහි value එක අවසන් වන්නේ සොයන value එකෙන් වන ඕනෑම element එකක් සොයා ගත හැක. උදා: [class$=”test”] — “class” attribute හි value එක අවසන් වන්නේ ‘test’ ලෙස වන class=”test” හෝ class=”first_test” වැනි values සහිත elements.
17. [attribute*=value] මගින් — නම් කරන ලද attribute එකෙහි value එක සොයන value එක තුල කොතැන හෝ අන්තර්ගත වන elements select කර ගත හැක. උදා: [class*=”test”] — “class” attribute හි value එක තුල කොතැනක හෝ ‘test’ value එක සදහන් වන class=”first_test”, class=”test_result” හෝ class=”abctestefg” වැනි values සහිත elements.
ඉහත දක්වන ලද CSS combinator selectors පහත පරිදි සාරාංශ ගත කල හැක.
And selector (no space) — selects all elements that are all selectors.
Or selector ( , ) — selects all elements that are having either selector.
descendant selector (space) — matches all elements that are descendants of a specified element.
child selector (>) — selects all elements that are the children of a specified element.
adjacent sibling selector (+) — select an element that is directly after another specific element.
general sibling selector (~) — selects all elements that are next siblings of a specified element.
මේ පිලිබදව වැඩි තොරතුරු පහත මුලාශ්‍ර වලින් හොයාගන්න පුළුවන්.
ඉහත කරුණු අතර, ඔබට එකග විය නොහැකි යමක් හෝ අලුතින් එක්විය යුතු දෙයක් ඇත්නම් කරුණාකර Response (comment) එකක් මගින් දැනුවත් කරන්න. වැරදි/අඩුපාඩු සහිත තොරතුරක් සමාජ ගතවීම වැලක්වීමට ඔබටද එමගින් දායක විය හැකියි.
මීළග article එකෙන් අපි බලමු CSS Pseudo selectors ගැන.
