CSS3 এর child selector কি এবং কেন use করা হয় ? - প্রিয়লেখা

CSS3 এর child selector কি এবং কেন use করা হয় ?

sakeba
Published: August 31, 2016

CSS3 child selector :

CSS  এর  selector নিয়ে সব সময় কাজ করা হয়। বিভিন্ন ধরনের selector আছে , এসব  selector দিয়ে HTML পেজের  element  select  করা  যায় এবং নিজের  ইচ্ছেমত style  করা  যায় । একটি ভাল css style করার জন্য এবং  code  এর complexity কমানোর  জন্য  child selector  বিষয়টি সম্পর্কে প্রোগ্রামারকে অবশ্যই ভাল ধারণা থাকতে হবে। আমরা HTML এ একটি  tag  মধ্যে  অন্য  আরো  অনেক tag  ব্যবহার  করে থাকি । যেমন :  <div><p></p><h2></h2></div> . এক্ষেত্রে  css এ  div  এর  চাইল্ড  সিলেক্টর  হবে   p, h2 . css  file এ h2 এর  জন্য  চাইল্ড  সিলেক্টর  লিখতে  হবে  div>h2 .  তাহলে  div > h2  এর  জন্য css  করা  হলে  শুধুমাত্র  h2 এর  জন্যই  css  design apply হবে।
একই ভাবে যদি অনেক গুলো <p> tag থেকে প্রথম ও শেষ <p> tag এর design  আলাদা করতে চাই তাহলে তার জন্য first-child , last-child selector use করতে হবে।
HTML ও CSS এর code নিচে দেয়া হল ।
<html>
<head>
<title> http://creativeit-inst.com/ </title>
<style>
div > p:first-child{

background-color: #9f5151;
color: whitesmoke;
font-family: monospace;
padding: 10px 5px;
font-weight: bold;
}
div > p:last-child{
background-color: #51729f;
color: whitesmoke;
font-family: monospace;
padding: 10px 5px;
font-weight: bold;
}
div>h2{
font-family:Arial, Helvetica, sans-serif;
color:#0b4a6a;
background:#d3b677;
border:#57a2d1 5px solid;
padding:10px;
text-align: center;
}
</style>

</head>
<body >
<div>

<p>
Creative IT Ltd. started its activities with providing IT & ITES
</p>
<p>
Services are inclusive BPO, Software Development, Web Design & Development 
</p>
<p>
Services are inclusive BPO, Software Development, Web Design & Development
</p>
</div>
<div>
<h2>Creative IT Institute of Bangladesh </h2>
</div>
</body>
</html>

output :
output
একটা  editor open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  দিয়ে save করে index.html ফাইলটি  browser  দিয়ে open করলে output এর  ছবির মত দেখাবে।পরবর্তী tutorial  এ আরও child selector নিয়ে কাজ দেখানো হবে। ধন্যবাদ।