CSS3 নির্বাচক: প্রথম শ্রেণীর নাম সহ টাইপ?

Question

সিএসএস 3 নির্বাচক ব্যবহার করা কি সম্ভব? :first-of-typeপ্রদত্ত শ্রেণীর নামের সাথে প্রথম উপাদানটি নির্বাচন করতে ? আমি আমার পরীক্ষায় সফল হইনি তাই আমি ভাবছি তা নয়?

কোড ( http://jsfiddle.net/YWY4L/ ):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

Answer 1

না, এটি কেবলমাত্র একজন নির্বাচক ব্যবহার করে সম্ভব নয়। :first-of-typeসিউডো-বর্গ তার প্রথম উপাদান নির্বাচন টাইপ ( div, pইত্যাদি)। সেই সিউডো-ক্লাসের সাথে ক্লাস সিলেক্টর (বা কোনও টাইপ সিলেক্টর) ব্যবহার করার অর্থ একটি উপাদান নির্বাচন করা যদি এটিতে প্রদত্ত শ্রেণি থাকে (বা প্রদত্ত ধরণের হয়) এবং তার ভাইবোনদের মধ্যে এটি প্রথম ।

দুর্ভাগ্যক্রমে, সিএসএস এমন কোনও :first-of-classনির্বাচক সরবরাহ করে না যা কেবল কোনও শ্রেণীর প্রথম উপস্থিতি পছন্দ করে। কার্যকারণ হিসাবে, আপনি এর মতো কিছু ব্যবহার করতে পারেন:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

কর্মক্ষেত্রের জন্য ব্যাখ্যা এবং চিত্রগুলি এখানে এবং এখানে দেওয়া আছে ।

Comments

কোনও @justNik এটি একাধিক উপাদানগুলির জন্য কাজ করে না। .myclass1নির্বাচক প্রতিটি উপাদান নির্বাচন হবে .myclass1। .myclass1 ~ .myclass1শ্রেণীর সাথে প্রতিটি উপাদান নির্বাচন করতে সাধারণ নির্বাচক কম্বিনেটর ব্যবহার করে .myclass1যা একটি শ্রেণীর সাথে একটি উপাদানগুলির নিম্নলিখিত ভাইবাল .myclass1। এটি আশ্চর্যজনকভাবে এখানে ব্যাখ্যা করা হয় ।

— ওয়েবওয়ান্ডার

দুর্দান্ত কাজ! এটি চৌরাস্তা পর্যবেক্ষক ব্যবহার করে সেই স্ক্রোল-স্পাই প্রয়োগের জন্য খুব সুন্দরভাবে কাজ করেছে, যেখানে পৃষ্ঠায় কিছু বিভাগ উভয়ই দৃশ্যমান হতে পারে, তবে আমরা কেবল প্রথম সক্রিয় একটি গা bold়ভাবে আঁকতে চাই।

— জাভর

Answer 2

খসড়া CSS সিলেক্টর শ্রেনী 4 একটি যোগ করার জন্য প্রস্তাব of <other-selector>মধ্যে ব্যাকরণ :nth-childনির্বাচক । এটি আপনাকে প্রদত্ত অন্য নির্বাচককে মিলে যাওয়া n বাচ্চা বাছাই করতে অনুমতি দেবে :

:nth-child(1 of p.myclass) 

পূর্ববর্তী খসড়াগুলি একটি নতুন সিউডো-শ্রেণি ব্যবহার করেছিল :nth-match(), তাই আপনি বৈশিষ্ট্যটির কিছু আলোচনায় সেই বাক্য গঠনটি দেখতে পাবেন:

:nth-match(1 of p.myclass)

এটি এখন ওয়েবকিটে প্রয়োগ করা হয়েছে , এবং এটি সাফারিতে উপলব্ধ, তবে এটি কেবল এটির সমর্থনকারী ব্রাউজার হিসাবে উপস্থিত হয় । এটি ব্লিঙ্ক (ক্রোম) , গেকো (ফায়ারফক্স) বাস্তবায়নের জন্য দায়ের করা টিকিট রয়েছে এবং এজতে এটি প্রয়োগের জন্য একটি অনুরোধ রয়েছে , তবে এর কোনওটিতে আপাত কোনও অগ্রগতি নেই।

Comments

শুধুমাত্র 10 বছর, এবং আমি এটি ব্যবহার করতে পারি। যদিও আমি যে প্রকল্পটি এটি ব্যবহার করব তা আগামীকাল শেষ করা দরকার।

— লাজোস মেসারোস

: নবম-ম্যাচ () নবম-শিশু () -র

— নেব্রাউন

@ ন্যাব্রাউন the78 মাথা আপ করার জন্য ধন্যবাদ, বর্তমানকে উত্তরটি আপডেট করেছে।

— ব্রায়ান ক্যাম্পবেল

Answer 3

এটি CSS3 নির্বাচক ব্যবহার করা সম্ভব নয় : প্রদত্ত শ্রেণীর নাম সহ প্রথম উপাদানটি নির্বাচন করতে প্রথম ধরণের

তবে, যদি লক্ষ্যযুক্ত উপাদানটির একটি পূর্ববর্তী উপাদান সহোদর থাকে, তবে আপনি একই শ্রেণীর নামের সাথে পূর্ববর্তী উপাদানটি সঙ্গে না রেখে এমন উপাদানটির সাথে মিল রেখে অবহেলা সিএসএস সিউডো-ক্লাস এবং সংলগ্ন ভাইবোলে নির্বাচনকারীদের একত্রিত করতে পারেন :

:not(.myclass1) + .myclass1

সম্পূর্ণ কার্যকারী কোড উদাহরণ:

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

Answer 4

আমি আপনার রেফারেন্সের জন্য একটি সমাধান পেয়েছি। কিছু গ্রুপ ডিভ থেকে প্রথম দুটি বিভাগের দুটি একই শ্রেণীর গ্রুপ থেকে নির্বাচন করুন

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

বিটিডব্লিউ, আমি জানি না কেন :last-of-typeকাজ করে, কিন্তু :first-of-typeকাজ করে না।

জেএসফিলের উপর আমার পরীক্ষাগুলি ... https://jsfiddle.net/aspanoz/m1sg4496/

Comments

এটি প্রয়োজনীয় হিসাবে কাজ করে না, যেমনটি ইতিমধ্যে ফিডাল থেকে দেখা যায়। শুধু এই আছে, তাই না গত DIV আছে নির্বাচন করুন যদি এটি বর্গ নেই।

— মার্টেন কোয়েটিসিয়ার

Answer 5

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

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

এই: নবম-শিশু সিউডো-নির্বাচক শক্তিশালী - প্রথম বন্ধনী সূত্রগুলি পাশাপাশি সংখ্যারও গ্রহণ করে।

আরও এখানে: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Comments

হ্যাঁ, আমি এটি কাজ করে না বলে মনে করি না, কমপক্ষে ক্রোমে নয় ... jsfiddle.net/YWY4L/91

— অ্যাডাম

"এখন ভবিষ্যতের আগমন" দিয়ে আপনি কী বোঝাতে চাইছেন? এটি কেবল লেখার সময় সাফারিতে কাজ করে।

— আলেজান্দ্রো গার্সিয়া ইগলেসিয়াস

Answer 6

ফ্যালব্যাক সমাধান হিসাবে আপনি নিজের ক্লাসগুলি প্যারেন্ট উপাদানগুলিতে এভাবে গুটিয়ে রাখতে পারেন:

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>

Answer 7

কীভাবে এটি ব্যাখ্যা করবেন তা নিশ্চিত নন তবে আমি আজ একইরকম কিছু নিয়ে চলেছি। সেট করতে সক্ষম হচ্ছে না .user:first-of-type{}যখন.user:last-of-type{}সূক্ষ্ম কাজ । আমি কোনও শ্রেণি বা স্টাইলিং ছাড়াই তাদের একটি ডিভের মধ্যে জড়িয়ে দেওয়ার পরে এটি ঠিক করা হয়েছিল:

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

Answer 8

আপনি ক্লাসের প্রতিটি উপাদান যা একই ক্লাসের ভাইবোন বাছাই করে এটি করতে পারেন, যা পৃষ্ঠার প্রতিটি উপাদান নির্বাচন করবে, সুতরাং আপনাকে আবার শ্রেণীর দ্বারা নির্বাচন করতে হবে।

উদাহরণ:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

Answer 9

কেবল :firstআমার পক্ষে কাজ করে, কেন এখনও এটি উল্লেখ করা হয়নি?

Comments

:firstমুদ্রণের সাথে সম্পর্কিত সিউডো-ক্লাস।

— ব্যবহারকারী 247702