Creative IT Blog Just another WordPress site
Related Articles
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 :
একটা editor open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html দিয়ে save করে index.html ফাইলটি browser দিয়ে open করলে output এর ছবির মত দেখাবে।পরবর্তী tutorial এ আরও child selector নিয়ে কাজ দেখানো হবে। ধন্যবাদ।
