আমি কি একাধিক থাকতে পারি: একই উপাদানটির সিউডো-উপাদানগুলির আগে?

Question

:beforeএকই উপাদানটির জন্য একাধিক সিউডো রাখা কি সম্ভব ?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

আমি jQuery ব্যবহার করে উপরের শৈলীগুলিকে একই উপাদানটিতে প্রয়োগ করার চেষ্টা করছি, তবে কেবলমাত্র সাম্প্রতিকতমটি প্রয়োগ করা হয়েছে, এটি উভয়ই নয়।

Answer 1

CSS2.1 এ কোনও উপাদানের কাছে যে কোনও সময়ে কেবলমাত্র কোনও ধরণের সিউডো-উপাদান থাকতে পারে। (এর অর্থ একটি উপাদানটির একটি :beforeএবং :afterসিউডো-উপাদান উভয়ই থাকতে পারে - এটি কেবল প্রতিটি ধরণের একের বেশি থাকতে পারে না))

ফলস্বরূপ, যখন আপনার কাছে :beforeএকই উপাদানটির সাথে একাধিক নিয়ম মেলে, তারা সমস্ত ক্যাসকেড করবে এবং :beforeএকটি সাধারণ সিউডো-এলিমেন্টে প্রয়োগ করবে , সাধারণ উপাদান হিসাবে। আপনার উদাহরণে, শেষের ফলাফলটি এরকম দেখাচ্ছে:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

যেমন আপনি দেখতে পাচ্ছেন, কেবলমাত্র যে contentঘোষণার সর্বোচ্চ অগ্রাধিকার রয়েছে (যেমন উল্লেখ করা হয়েছে যেটি শেষের দিকে আসে) কার্যকর হবে - বাকী ঘোষণাগুলি বাদ দেওয়া হয়েছে, যেমন অন্য কোনও সিএসএস সম্পত্তি হিসাবে রয়েছে।

এই আচরণটি CSS2.1 এর নির্বাচক বিভাগে বর্ণিত হয়েছে :

সিউডো-উপাদানগুলি সিএসএসে ঠিক বাস্তব উপাদানগুলির মতোই নীচে এবং অন্য কোথাও বর্ণিত ব্যতিক্রমগুলি নিয়ে আচরণ করে।

এটি সূচিত করে যে সিউডো-উপাদানগুলির সাথে নির্বাচকরা সাধারণ উপাদানগুলির জন্য নির্বাচকদের মতোই কাজ করে। এর অর্থ হ'ল ক্যাসকেডটিও একইভাবে কাজ করা উচিত। আশ্চর্যের বিষয় হল, CSS2.1 কেবলমাত্র রেফারেন্স হিসাবে উপস্থিত হবে; তন্ন তন্ন CSS3-নির্বাচকরা কিংবা CSS3-নির্ঝর এ সব এই উল্লেখ, এবং এটি দেখা হবে কিনা তা ভবিষ্যতে নির্দেশের মধ্যে ব্যাখ্যা করা হবে অবশেষ।

যদি কোনও উপাদান একই সিউডো-এলিমেন্টের সাথে একাধিক নির্বাচককে মেলে এবং আপনি তাদের সকলকে কোনওভাবে প্রয়োগ করতে চান তবে আপনাকে সম্মিলিত নির্বাচকদের সাথে অতিরিক্ত সিএসএস বিধি তৈরি করতে হবে যাতে ব্রাউজারটি ঠিক কী করবে সেগুলি নির্দিষ্ট করতে পারবেন মামলা। আমি contentএখানে সম্পত্তি সহ একটি সম্পূর্ণ উদাহরণ সরবরাহ করতে পারি না , কারণ প্রতীক বা পাঠ্যটি প্রথমে আসা উচিত কিনা তা উদাহরণস্বরূপ পরিষ্কার নয়। তবে এই সম্মিলিত নিয়মের জন্য আপনার যে নির্বাচকটি প্রয়োজন তা হ'ল .circle.now:beforeবা .now.circle:before- আপনি যে কোনও বাছাইকারী বাছাইকারী উভয় নির্বাচকই সমান সমান হিসাবে ব্যক্তিগত পছন্দ হিসাবে বিবেচিত, এটি কেবলমাত্র আপনার contentনিজের সংজ্ঞা দেওয়ার জন্য যে সম্পত্তির মূল্য প্রয়োজন।

আপনার যদি এখনও একটি দৃ concrete় উদাহরণের প্রয়োজন হয় তবে এই একই প্রশ্নের আমার উত্তরটি দেখুন ।

লিগ্যাসি সিএসএস-বিষয়বস্তুর স্পেসিফিকেশনে::before::after CSS2.1 ক্যাসকেডের সাথে সামঞ্জস্যপূর্ণ এমন একটি স্বরলিপি ব্যবহার করে একাধিক এবং সিউডো-উপাদানগুলি সন্নিবেশ করানোর একটি বিভাগ রয়েছে তবে লক্ষ্য করুন যে সেই নির্দিষ্ট নথিটি অপ্রচলিত - এটি ২০০৩ সাল থেকে আপডেট হয়নি এবং কারও কাছে নেই গত দশকে সেই বৈশিষ্ট্যটি কার্যকর করা হয়েছে। সুসংবাদটি হ'ল পরিত্যক্ত দলিলটি সক্রিয়ভাবে সিএসএস-সামগ্রী -3 এবং সিএসএস-সিউডো -4 এর ছদ্মবেশে একটি পুনর্লিখনের মধ্য দিয়ে চলছে । খারাপ খবরটি হ'ল একাধিক সিউডো-এলিমেন্ট বৈশিষ্ট্যটি আর কোথাও স্পেসিফিকেশনের মধ্যে খুঁজে পাওয়া যায় না, সম্ভবত প্রয়োগকারীদের আগ্রহের অভাব হয়।

Comments

প্রদত্ত ক্ষেত্রে, যদি কোনও উপাদান উভয় শ্রেণীর circleএবং শ্রেণীর অন্তর্গত হয় তবে উভয় nowনিয়মই উপাদানটির :beforeসিউডো-উপাদানটির জন্য প্রযোজ্য , তবে সাধারণ সিএসএস ইঙ্গিত দেয় যে কেবলমাত্র একটি contentসেটিংস কার্যকর হতে পারে (সাধারণ ক্যাসকেড বিধি দ্বারা)। মোদ্দা কথাটি যে contentজমে না।

— Jukka K. Korpela

সক্রিয় আউট এই প্রশ্নের আমি বেশ কয়েক মাস পরে বললেন এই এক একটি সদৃশ। আমি তখন থেকে অন্যান্য উত্তর থেকে বেশিরভাগ তথ্য একত্রীকরণ করেছি, যা মূলত @ জুक्का উপরে বলেছে যে সমস্ত কিছুতে প্রসারিত হয়েছে, প্রথমে আসার শীর্ষে, এটি আরও বেশি ট্র্যাফিক পাচ্ছে বলে এই একটিতে।

— বোল্টক্লক

13 বছর পরে, সিএসএস-সামগ্রী -3 খসড়াটি অবশেষে আপডেট করা হয়েছে । সিউডো-এলিমেন্ট বিভাগটি অবশ্যই সিএসএস-সিউডো -4 এর পক্ষে সরিয়ে ফেলা হয়েছে, যা একাধিক ::beforeবা ::afterছদ্ম-উপাদানগুলিকে অনুমতি দেয় না ।

— ওরিওল

@ অরিওল: 12 বছর, আসলে। সিএসএস-সিউডো -4 এর এফপিডাব্লুডি গত বছর প্রবর্তিত হয়েছিল, সেই সময়ে সিএসএস-সামগ্রী -3 ইতিমধ্যে নতুন অনুমানের দিকে ইঙ্গিত করার জন্য আপডেট করা হয়েছিল।

— বোল্টক্লক

@ বল্টক্লক ড্রাফটস সিএসএসজিজি.আর.জে সিএসএস-কন্টেন্ট -৩ সম্পাদক খসড়াটি কিছু সময় আগে আপডেট করা হয়েছিল, তবে ডাব্লু 3.org এ কার্যনির্বাহী খসড়াটি এখনও 2003 অবধি ছিল। আমার এখনও কিছু আশা ছিল ...

— ওরিওল

Answer 2

যদি আপনার মূল উপাদানটিতে কিছু শিশু উপাদান বা পাঠ্য থাকে তবে আপনি এটি ব্যবহার করতে পারেন।

আপনার মূল উপাদানটি আপেক্ষিকভাবে স্থিত করুন (বা পরম / স্থির) এবং উভয় ব্যবহার করুন: পূর্বে এবং পরে স্থিত পরম (আমার পরিস্থিতিতে এটি পরম হতে হয়েছিল, আপনার সম্পর্কে জানেন না)।

এখন আপনি যদি আরও একটি ছদ্ম উপাদান চান তবে একটি পরম সংযুক্ত করুন: মূল উপাদানটির বাচ্চাদের একটির আগে (যদি আপনার কেবল পাঠ্য থাকে তবে এটি একটি স্প্যানে রেখে দিন, এখন আপনার একটি উপাদান রয়েছে), যা আপেক্ষিক / পরম / স্থির নয় ।

এই উপাদানটি তার প্রধান উপাদান হ'ল তার মালিকের মতো আচরণ শুরু করবে।

এইচটিএমএল

<div class="circle">
    <span>Some text</span>
</div>

সিএসএস

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

Comments

যদিও নির্বাচিত উত্তরটি সঠিক, এটি আমার ক্ষেত্রে কার্যকর ছিল। আমি ডিওমে আরও নোড যুক্ত করার প্রয়োজন ছাড়াই একাধিক স্যুইডো উপাদান থাকার অনুকরণ করতে সক্ষম হয়েছি!

— matt.kauffman23

@ matt.kauffman23 সুতরাং, আপনি অনুগ্রহ করে কীভাবে বলতে পারেন?

— বিবিআইপিটিপ

@ বিবিআইকেটপ দুঃখিত, আপনার মন্তব্যটি দেখেছেন। আমার ক্ষেত্রে আমি এমন একটি মডেলে কাজ করছিলাম যা সর্বদা বাচ্চা ছিল তাই আমি এরকম কিছু দিয়ে শেষ করেছি:.modal:first-child:before { …

— matt.kauffman23

@ matt.kauffman23 6 বছরেরও বেশি সময় পরে এই জাতীয় বিশদটি পুনরায় সংগ্রহ করতে আপনার দুর্দান্ত স্মৃতি রয়েছে!

— ক্রিসঅডনি

Answer 3

আমি এটি ব্যবহার করে সমাধান করেছি:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

আইকনের জন্য ফন্ট ফ্যামিলি "ফন্ট ভয়ঙ্কর 5 বিনামূল্যে" ব্যবহার করুন এবং এর পরে, আমরা ফন্টটি আবার উল্লেখ করতে হবে যা আমরা আবার ব্যবহার করছি কারণ যদি আমরা এটি না করি, নেভিগেটর ডিফল্ট ফন্ট ব্যবহার করবে (বারের নতুন রোমান বা এর মতো কিছু) এই).