আমি একটি আদেশ তালিকা আমি কোথায় চাই প্রাথমিক সংখ্যা 6. আমি দেখেছি যে এই ছিল হতে হবে সমর্থিত (বর্তমানে অবচিত) এইচটিএমএল 4.01 হবে। এই স্পেসিফিকেশনে তারা বলে যে আপনি সিএসএস ব্যবহার করে প্রারম্ভিক পূর্ণসংখ্যা নির্দিষ্ট করতে পারেন। ( startবৈশিষ্ট্যের পরিবর্তে )
আপনি কীভাবে সিএসএস দিয়ে শুরু নম্বরটি নির্দিষ্ট করবেন?
উত্তর:
নির্দিষ্ট বিন্দুতে অর্ডার তালিকা (ওএল) শুরু করার জন্য যদি আপনার কার্যকারিতাটির প্রয়োজন হয় তবে আপনাকে নিজের ডকুমেন্টটি এইচটিএমএল 5 হিসাবে নির্দিষ্ট করতে হবে; যা হলো:
<!doctype html>সেই ডক্টাইপ সহ, startঅর্ডার করা তালিকায় একটি বৈশিষ্ট্য নির্ধারণ করা বৈধ । যেমন:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol><ol start="">এইচটিএমএল 5-এ আর হ্রাস করা হয় না , সুতরাং HTML4.01 যা বলুক না কেন আমি কেবল এটি ব্যবহার চালিয়ে যাব।
start="number" সফল হয় কারণ এটি পূর্বে সংখ্যার ভিত্তিতে স্বয়ংক্রিয়ভাবে পরিবর্তন হয় না।
আরও জটিল প্রয়োজনের সাথে খাপ খায় এমন করার আরেকটি উপায় হ'ল ব্যবহার counter-resetএবং counter-increment।
সমস্যা
বলুন আপনি কি এরকম কিছু চেয়েছিলেন:
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item fourআপনি দ্বিতীয় start="3"তৃতীয় সেট করতে পারেliol তবে এখন প্রতিবার প্রথমটিতে কোনও আইটেম যুক্ত করার সময় আপনাকে এটি পরিবর্তন করতে হবেol
সমাধান
প্রথমে আসুন আমাদের বর্তমান সংখ্যার বিন্যাসটি পরিষ্কার করুন।
ol {
list-style: none;
}আমরা প্রতিটি লি কাউন্টার প্রদর্শন করতে হবে
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}এখন আমাদের নিশ্চিত করা দরকার যে olপ্রতিটির পরিবর্তে কাউন্টারটি কেবল প্রথমটিতে পুনরায় সেট করা হয় ।
ol:first-of-type {
counter-reset: mycounter;
}ডেমো
http://codepen.io/ajkochanowicz/pen/mJeNwY
এখন আমি তালিকায় আরও আইটেম যুক্ত করতে পারি এবং নম্বরগুলি সংরক্ষণ করা হবে।
1. Item one
2. Item two
...
n. Item n
Interruption from a <p> tag
n+1. Item n+1
n+2. Item n+2
...ol li {...}হওয়া উচিত ol li:before {...} - অন্যথায় এটি নিখুঁত সমাধান, আপনাকে ধন্যবাদ!
আমি অবাক হয়েছি যে আমি এই থ্রেডে উত্তরটি খুঁজে পাচ্ছি না।
আমি এই উত্সটি পেয়েছি , যা আমি নীচে সংক্ষেপে বলেছি:
এইচটিএমএল পরিবর্তে সিএসএস ব্যবহার করে অর্ডার করা তালিকার জন্য শুরু বৈশিষ্ট্যটি সেট করতে, আপনি counter-incrementসম্পত্তিটি নীচের হিসাবে ব্যবহার করতে পারেন :
ol {
list-style: none;
counter-increment: start 3;
}
li:before {
content: counter(start, lower-alpha) ") ";
counter-increment: start;
}counter-increment0-সূচকযুক্ত বলে মনে হয়, তাই 4 থেকে শুরু হওয়া একটি তালিকা পেতে, ব্যবহার করুন 3।
নিম্নলিখিত এইচটিএমএল জন্য
<ol>
<li>Buy milk</li>
<li>Feed the dog</li>
<li>Drink coffee</li>
</ol>আমার ফলাফল
d) Buy milk
e) Feed the dog
f) Drink coffeeআমার কোলাহল পরীক্ষা করে দেখুন
আরও দেখুন W3 উইকি রেফারেন্স
অন্যরা যেমন পরামর্শ দিয়েছে, এর startবৈশিষ্ট্যটি কেউ ব্যবহার করতে পারেol উপাদানটির ।
বিকল্পভাবে, কেউ উপাদানটির valueবৈশিষ্ট্য ব্যবহার করতে পারেন li। উভয় বৈশিষ্ট্যই এইচটিএমএল 4.01 এ অবচয় হিসাবে চিহ্নিত হয়েছে , তবে এইচটিএমএল 5 ( olএবং li) তে নয়।
<ol start="-2">
<li>Alpha</li>
<li>Beta</li>
<li value="10">Gamma</li>
<li>Delta</li>
</ol>ডিফল্ট মান ("1") এর চেয়ে আলাদা এমন একটি সংখ্যায় অর্ডার করা তালিকার সংখ্যা শুরু করার জন্য গুণকের প্রয়োজন start। এইচটিএমএলকে এইচটিএমএল 1.০১ স্পেসিফিকেশনে ( অবহিত করা হয়নি) অনুমতি দেওয়া হয়েছিল ( এই প্রশ্নটি পোস্ট করার সময় এইচটিএমএল ৫.০১ এখনও "সুপারসাইডেড স্পেসিফিকেশন" ছিল না) এবং এটি বর্তমান এইচটিএমএল 5.2 স্পেসিফিকেশনটিতে অনুমোদিত । এক্সএইচটিএমএল ১.০ এর ট্রানজিশনাল ডিটিডিতেও এই olউপাদানটির একটি alচ্ছিকstart বৈশিষ্ট্য ছিল তবে এক্সএইচটিএমএল ১.০ এর কঠোর ডিটিডি তে নয় (স্ট্রিংটি সন্ধান করুন এবং বৈশিষ্ট্য তালিকাটি পরীক্ষা করুন)। তাই পুরোনো মন্তব্য কিছু কি বলতে সত্ত্বেও, অ্যাট্রিবিউট হয় নি অবচিতATTLIST olstart ; বরং এটি অবৈধ ছিলএইচটিএমএল 4.01 এবং এক্সএইচটিএমএল 1.0 এর কঠোর ডিটিডিগুলিতে। মন্তব্যগুলির মধ্যে একটি যা দাবি করে তা সত্ত্বেও, startবৈশিষ্ট্যটির অনুমতি দেওয়া হয় নাul উপাদানটিতে এবং বর্তমানে ফায়ারফক্স এবং ক্রোমিয়ামে কাজ করে না।
এছাড়াও লক্ষ করুন যে কয়েক হাজার বিভাজক কাজ করে না (ফায়ারফক্স এবং ক্রোমিয়ামের বর্তমান সংস্করণগুলিতে)। নিম্নলিখিত কোড স্নিপেট, 10.000হিসাবে ব্যাখ্যা করা হবে 10; একই প্রযোজ্য 10,000। সুতরাং নিম্নলিখিত ধরণের counterমান ব্যবহার করবেন না :
<ol start="10.000">
<li>Item 10.000</li>
<li>Next item</li>
<li>Next item</li>
</ol>সুতরাং আপনার যা ব্যবহার করা উচিত তা হ'ল (বিরল ক্ষেত্রে যেখানে 1000 এর চেয়ে বেশি মানের প্রয়োজন হয়):
<ol start="10000">
<li>Item 10.000</li>
<li>Next item</li>
<li>Next item</li>
</ol>অন্যান্য উত্তরগুলির মধ্যে কিছু সিএসএস সম্পত্তি ব্যবহার করার পরামর্শ দেয় counterতবে এটি সামগ্রী এবং লেআউটের (যথাক্রমে এইচটিএমএল এবং সিএসএসে) traditionalতিহ্যবাহী পৃথকীকরণের বিরোধিতা করে। কিছু নির্দিষ্ট দৃষ্টি প্রতিবন্ধকতাযুক্ত ব্যবহারকারীরা তাদের নিজস্ব স্টাইল শিট ব্যবহার করতে পারেন এবং counterফলস্বরূপ মানগুলি হারাতে পারে। এর জন্য স্ক্রিন রিডার সমর্থনও counterপরীক্ষা করা উচিত। সিএসএসে সামগ্রীর জন্য স্ক্রিন রিডার সমর্থন তুলনামূলকভাবে সাম্প্রতিক বৈশিষ্ট্য এবং আচরণটি অগত্যা সামঞ্জস্যপূর্ণ নয়। দেখুন স্ক্রিন রিডার এবং CSS: আমরা স্টাইল এর (এবং মধ্যে বিষয়বস্তু) নিভে যাচ্ছে? ওয়েবএআইএম ব্লগে জন নর্থআপ দ্বারা (আগস্ট 2017)।
তালিকাগুলি বাসা বেঁধে থাকলে, নেস্টেড তালিকার আইটেমগুলি রেখে হ্যান্ডলিং করতে হবে যা গ্র্যান্ড প্যারেন্টস কোনও তালিকা আইটেম নয় তা যাচাই করে আমি সম্পন্ন করেছি।
var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
if (list[i].parentElement.parentElement.nodeName!="LI") {
cnt += 1;
list[i].setAttribute("value",cnt);
}
}<!DOCTYPE html>
<html>
<body>
<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>
<p><strong>1st list:</strong></p>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<p><strong>2nd list:</strong></p>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</section>
</body>
</html>সিএসএসের সাহায্যে নেস্টেড তালিকার আইটেম রয়েছে এমন কেসটি কাভার করা কিছুটা জটিল, সুতরাং কেবলমাত্র প্রথম তালিকার স্তরের কাস্টম নম্বর পাওয়া যায় যা প্রতিটি নতুন আদেশযুক্ত তালিকার সাথে ইন্টারপ্ট হয় না। আমি তালিকা আইটেমগুলিতে কাস্টম নম্বর পেতে পারে তার সম্ভাব্য পাথগুলি সংজ্ঞায়িত করতে CSS সংযুক্তকারী '>' ব্যবহার করছি। Https://www.w3schools.com/css/css_combinators.asp দেখুন
body {
counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
counter-increment: li_cnt;
content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
list-style-type: decimal;
}<!DOCTYPE html>
<html>
<body>
<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>
<p><strong>1st list:</strong></p>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<p><strong>2nd list:</strong></p>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</section>
</body>
</html>স্পষ্টতই @ অর্ডার করা তালিকার <স্টার্ট> <<> অথবা কোনও তালিকার আইটেমের মূল্য <li> সিএসএসের মাধ্যমে সেট করা যাবে না। Https://www.w3schools.com/css/css_list.asp দেখুন
সিএসএসে কাউন্টার দ্বারা সংখ্যাটি প্রতিস্থাপন করা সেরা / দ্রুততম / বুদ্ধিমানের সমাধান বলে মনে হচ্ছে এবং অন্যরাও এর প্রচার করছেন, যেমন https://css-tricks.com/numbering-in-style/
খাঁটি জাভাস্ক্রিপ্টের মাধ্যমে প্রতিটি তালিকার আইটেমের @ মূল্য নির্ধারণ করা সম্ভব তবে এটি সিএসএসের চেয়ে অবশ্যই ধীর। এমনকি তালিকা আইটেমটি অর্ডার করা তালিকার <ol> এর অন্তর্ভুক্ত কিনা তাও খতিয়ে দেখার দরকার নেই, কারণ অর্ডারড তালিকা স্বয়ংক্রিয়ভাবে বাদ পড়েছে।
var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
if (list[i].parentElement.nodeName=="OL") {
list[i].setAttribute("value",i+1);
}
}<!DOCTYPE html>
<html>
<body>
<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoid that each ordered list starts with 1:</p>
<p><strong>1st list:</strong></p>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<p><strong>2nd list:</strong></p>
<ol>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ol>
</section>
</body>
</html>