Id සහ Class Selectors

අප <p> ටැගයට css භාවිතයෙන් රතු පැහැය එක් කළා යැයි සිතන්න, දැන් ඔබට  ඔබගේ මුළු HTML ගොණුව පුරාම ඇති <p> ටැගයේ අන්තර්ගතයන් පෙන්වන්නේ රතු පැහැයෙන්. මේ හේතුව නිසා CSS අපට ID හා Classes යන selectors හඳුන්වා දෙනවා. සාමාන්‍ය භාවිතයේ ඇති HTML එලිමන්ට් වලට ස්ටයිල් එක් කිරීමට අමතරව අප කැමති selector එකක් සාදා එයට ස්ටයිල් එක් කිරීමට මේ ඔස්සේ අවකාශ ලැබෙනවා.

The Id Selector

ID සිලෙක්ටර් එක අප භාවිතා කරන්නේ එක් අනන්‍යය element එකකට ස්ටයිල් එක් කිරීම සඳහා පමණයි. මෙම සිලෙක්ටර් එක ලිවීමේදී id එක ලෙස නමක් සහ ඊට ඉදිරියෙන් # ලකුණක් යොදනවා. එනම් para1 ලෙස අප id එක නම් කළහොත් එයට අදාල css කේතය ලියන්නේ පහත පරිදියි.

#para1
{
text-align:center;
color:red;
}

අත්හදා බලන්න »

ඉඟිය: කිසි විටෙකත් id නාමයක් ඉලක්කමකින් අරඹන්න එපා. එය ෆයර්ෆොක්ස් වල වැඩ නොකරාවි.

The Class Selector

Class සිලෙක්ටරය අප භාවිතා කරනුයේ එලිමන්ට්ස් එකකට වැඩි ගණනක් හැඩ ගැන්වීම සඳහායි. id සිලෙක්ටරයට වඩා වැඩියෙන් css වලදී භාවිතා වන්නේ class සිලෙක්ටරයයි.

මේ අනුව class එක යටතේ HTML එලිමන්ට්ස් විශාල ප්‍රමාණයක් සඳහා ස්ටයිල් එක් කළ හැකියි. මේ සිලෙක්ටරය දැක්වීම සඳහා නමක් සහ එයට ඉදිරියෙන් තිතක් භාවිතා කළ යුතුයි. අප භාවිතා කරන ක්ලාස් එක center ලෙස නම් කළ හොත් අදාළ css කේතය පහත පරිදි ලිවිය යුතුයි.

.center {text-align:center;}

අත්හදා බලන්න »

ඉහත උදාහරණයේ ලෙස නොව class එකක් එක් එලිමන්ට් එකකට පමණක් බලපාන ලෙසද භාවිතා කළ හැකියි. පහත උදාහරණය බලන්න.

p.center {text-align:center;}

අත්හදා බලන්න »