How To Work CSS Element Selector Value

CSS full form is Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. এটা HTML এর স্টাইলের জন্য ব্যবহৃত হয়। CSS ছাড়া ওয়েব ডিজাইন কল্পনাই করা যায় না।

আজ আমরা CSS দুইটা গুরুত্বপূর্ণ সিলেক্টর display এবং overflow নিয়ে আলোচনা করব।

• display:block
• display:none
• display:inline 

    এবং

• overflow:auto
• overflow:hidden
• overflow:inherit

CSS element selector গুলোর value এর কাজ নিম্নরুপ :

display:block - মার্ক আপ এর কোন এলিমেন্টকে ব্লক আকারে দেখানোর জন্য এটার ব্যবহার। এটা ব্যবহার করলে আপনি padding, margin দিতে পারবেন অনায়াসেই। এটা ব্যবহার করলে ওই এলিমেন্ট তার div এ পুরো জায়গা দখল করবে।

display:none - এটা দ্বারা কোন এলিমেন্টকে হাইড করা হয়। মুলত এই কাজটা আরেক ভাবে করা যাই সেটা হল visibility:hidden/visibility:none কিন্তু এর ফলে এলিমেন্ট যেই জাইগা নিয়ে তা ঠিকি ধরে রাখে কিন্তু তার ভিতরে কোন কিছু সদৃশ্য আবস্থাই থাকে না। আর display:none যেমন এলিমেন্টকে হাইড করে পাশাপাশি এলিমেন্টর সকল জাইগাও অদৃশ্য করে দেয়। অর্থাৎ পুরাটাই অব্যাবহৃত অবস্থায় থাকে এবং যখন ইচ্ছা তা ব্যাবহার করার সম্ভব।

display:inline - এটা দ্বারা কোন এলিমেন্ট এর ভিতরে এক লাইনের কাজ করার জন্যে ব্যাবহৃত হয়ে থাকে। এইচটিএমল এর অনেক inline element আছে যেমন span. উদাহরণ হিসাবে বলা যাই যে আপনি একটা বাক্য ব্যাবহার করছেন যাতে একাধিক শব্দ আছে এখন এর মধ্যে একটাকে একটু ব্যতিক্রম করতে চাইছি। আমারা এক্ষেত্রে বেশী span ব্যাবহার করে থাকি। স্বাভাবিক ভাবে এটাকে span দিয়ে স্টাইলাইজ করলাম এখন আমরা যদি ওখানে display:block ইউজ করি তাহলে ওটা অটোমেটিক লাইন ভেঙে নিচে চলে আসবে যদি জাইগা থাকেও। আর ওখানে display:inline ব্যাবহার করলে ওটা লাইন এর যদি জাইগা থাকে তাহলে ততটুকু নিয়ে সেখানে থাকবে। অর্থাৎ display:inline যতটুকু width ততটুকু নিবে এবং নতুন লাইনের জন্যে কোন পেশার সৃষ্টি করবে না। তবে এর মত আরেকটা এলিমেন্ট এইচটিএমল এ আছে সেটা হচ্চে display: inline-block এর কাজও একই তবে এটা পুরাতন ভার্সন গুলাতে সমস্যা করে। আর display:inline মুটামুটি সব ভার্সনেই সাপোর্ট করে।

overflow:auto - এর কাজ অনেকটা overflow:scroll এর মতন । আর overflow:scroll হচ্ছে এটা এলিমেন্ট/ডিভ এর বাইরের আংশকে ভিতরে এনে scroll বারের সৃষ্টি করে। তবে এটা ব্যবহার করলে scroll বার এর প্রয়োজন হইলেও এটা প্রতিফলিত হবে না হলেও আংশিক প্রতিফলিত হবে। তবে overflow:auto ব্যাবহার করলে এই সমস্যা সমাধান পাওয়া যাই। অর্থাৎ এটা ব্যাবহার করলে যদি scroll বারের মত প্রয়োজন হয় তাহলে এটা প্রতিফলিত স্থানে অন্যথাই হবে না। এটা মুলত ডিভ/এলিমেন্ট এর ভিতরের কোন এলিমেন্ট এর width বা height বড় না হয়ে থাকে তাহলে এটা scroll বারের সৃষ্টি করে না। আর width বা height যেটা বড় হবে সেটার উপর ভিত্তি করে scroll তৈরি হবে ।

overflow:hidden - এটা ব্যবহার করা হয় যাতে দুটি ডিভ বা এলিমেন্ট যেন একটা আরেকটার গায়ের উপর উঠে না যায়, অর্থাৎ প্রতিটা যেন যার যার যায়গা ঠিক মত দখল করে এবং অন্যের যায়গায় প্রতিবন্ধকতা সৃষ্টি না করে।

overflow:inherit - এর কাজ হলো div র ভেতরে যদি আরো কয়েকটি divর মাধ্যমে এলিমেন্ট set কর এবং overflow এর value যদি inherit দওয়া হয়, তবে  ভেতরে divগুলোর মধ্যে margin+padding অংশকে ছেড়ে দিয়ে পরের div গুলো set হবে... এটির প্রয়োজন হতে পারে| inherit দিয়ে upper div এর style কে lower div তে নিয়ে আসা হয়|

যেমন:

class="div_one">
.div_one{overflow: none;}
.div_two{overflow:inherit;}এখনে div two তে div one এরoverflow এর style টা div_two তে apply হবে|

:first-child 
:first-line 
:first-letter 
:active 
:focus 
:link 
:visited 
:long(var) 
:before
:after এই CSS selector গুলোর কাজ গুলোর একটু আলোচনা

:first-child >>> এটি কোনো সিলেক্টর/ট্যাগ যেমন p, li ইত্যাদি ব্যবহৃত অনেক গুলো এর মধ্যে থেকে প্রথম সিলেক্টর/ ট্যাগ এর CSS style এর জন্য ব্যবহার হয়. যেমন -
this is first paragraph
this is second paragraph
this is third paragraph

:first-line >>> এটি কোনো সিলেক্টর/ ট্যাগ যেমন p, span ইত্যাদি এর মধ্যে একাধিক line এর প্রথম line কে CSS style পরিবর্তন করার জন্য ব্যবহৃত হয়. যেমন -

this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph

উল্লেখ্য : এখানে ব্যবহৃত প্রতিটি p ট্যাগ এর প্রথম line এর color red হবে যেহেতু আমি first-line এর color red ব্যবহার করেছি.

:first-letter >>> এটি কোনো সিলেক্টর/ ট্যাগ যেমন p, span ইত্যাদি এর মধ্যে ব্যবহৃত text এর প্রথম letter এর CSS style পরিবর্তন করার জন্য ব্যবহৃত হয়.

যেমন -
this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph

উল্লেখ্য : এখানে ব্যবহৃত প্রতিটি p ট্যাগ এর প্রথম letter এর color: red and

font-size: 50px হবে যেহেতু আমি first-line এর color red ব্যবহার করেছি.

:active >>> এটি কোনো সিলেক্টর/ট্যাগ যেমন a, p, span ইত্যাদি এর কোনো
টার উপর ক্লিক করলে তার CSS style পরিবর্তন করার জন্য ব্যবহৃত হয়. অর্থাৎ
আপনি যে ট্যাগ এর সাথে এই active pseudo-class ব্যবহার করবেন সেই ট্যাগ এর
CSS পরিবর্তন হবে.যেমন -
this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph
this is first paragraph this is first paragraph this is first paragraph

:focus >>> এটি শুধু input ট্যাগ যেমন কোনো text field, button, list

item ইত্যাদি এর উপর যখন ক্লিক করা হয় তখন তার CSS style পরিবর্তন হয়.যেমন - :link >>> এটি a ট্যাগ এর যে সকল link এখন পর্যন্ত দেখা হয় নাই তার CSS style এর জন্য ব্যবহৃত হয়.যেমন - link উল্লেখ্য : যখন browser refresh করবেন তখন এই effect টা দেখতে পাবেন. তাছাড়া না দেখতে পাবার সম্ভাবনা বেশি. :visited >>> এটি a ট্যাগ এর যে সকল link দেখা হয়েছে তার CSS style এর জন্য ব্যবহৃত হয়.যেমন - link :lang

( variable ) >>> এটি দিয়ে একটা লেখার দুই পাশে symbol বা কোনো বিশেষ কিছু use করা যায়. এটি দিয়ে বিভিন্ন ভাষার symbol ব্যবহার করা যায়।

উল্লেখ্য : এই pseudo-class ব্যবহার করার জন্য ট্যাগ খুবই সীমিত. সব ট্যাগ এ ব্যবহার করা যায় না. 

:before >>> এটি দিয়ে কোনো ট্যাগ এর মধ্যে ব্যবহৃত text বা অন্য কিছু এর আগে কিছু text বা image add করা হয়। 

উল্লেখ্য: :before use করলে CSS এ content এর মধ্যে যে লেখাটি লিখবেন তা ওই ট্যাগ এর প্রথমে দেখাবে .

:after >>> এটি দিয়ে কোনো ট্যাগ এর মধ্যে ব্যবহৃত text বা অন্য কিছু এর শেষে কিছু text বা image add করা হয়। 

উল্লেখ্য: :after use করলে CSS এ content এর মধ্যে যে লেখাটি লিখবেন তা ওই ট্যাগ এর শেষে দেখাবে।

Share if you care...