">" (সাইন-এর চেয়ে বেশি) সিএসএস নির্বাচক বলতে কী বোঝায়?

475

উদাহরণ স্বরূপ:

div > p.some_class {
  /* Some declarations */
}

>সাইন মানে ঠিক কি?

css css-selectors

— মিশা মোরোস্কো
সূত্র

672

>হয় শিশু combinator , কখনও কখনও ভুল করে সরাসরি বংশধর combinator বলা হয়। ¹

তার মানে নির্বাচক div > p.some_classএকমাত্র নির্বাচন অনুচ্ছেদ .some_classযে নেস্টেড হয় সরাসরি ভিতরে একটিdiv , এবং কোন যে অনুচ্ছেদগুলি মধ্যে আরও নেস্টেড করছে।

একটি উদাহরণ:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

কি নির্বাচিত এবং কি না:

নির্বাচিত
এটি p.some_classসরাসরি এর অভ্যন্তরে অবস্থিত div, তাই উভয় উপাদানগুলির মধ্যে পিতামাতার সাথে সম্পর্ক স্থাপন করা হয়।
নির্বাচন করা হয়নি
এই p.some_classএকটি দ্বারা অন্তর্ভুক্ত করা হয় blockquoteমধ্যে divবদলে, divনিজেই। যদিও এটি p.some_classপ্রভুর বংশধর div, এটি কোনও শিশু নয়; এটা নাতি নাতি

ফলস্বরূপ, div > p.some_classএই উপাদানটির সাথে মেলে না div p.some_class, পরিবর্তে বংশোদ্ভূত সংযুক্তি ব্যবহার করে will

¹ _{অনেক লোক এটিকে "প্রত্যক্ষ শিশু" বা "তাত্ক্ষণিক শিশু" বলতে আরও এগিয়ে যায় তবে এটি সম্পূর্ণ অপ্রয়োজনীয় (এবং আমার কাছে অবিশ্বাস্যরকম বিরক্তিকর), কারণ কোনও শিশু উপাদান যে কোনওভাবেই সংজ্ঞা অনুসারে তাত্ক্ষণিক , সুতরাং তারা একই জিনিসটিকে বোঝায়। "অপ্রত্যক্ষ শিশু" বলে কিছু নেই।}

— বোল্টক্লক
সূত্র

2

+1 এটিকে কি আসলেই বাচ্চা নির্বাচক বলা হয় ? যদি তা হয় তবে তা বেশ বিভ্রান্তিকর। আমি ভাবতাম #something aশিশু নির্বাচক হব।

— অ্যালেক্স

2

@ অ্যালেক্স: হ্যা :) এর #something aঅর্থ aহ'ল কোনও নাতি-নাতি বা গ্রেট ^ n নাতি #something(এটি বাসা বাঁধার গভীরতা বিবেচনা করে না)।

— BoltClock

12

@ আলেক্সকে এটিকে চাইল্ড কম্বিনেটর বলা হয় , স্থানটিকে বংশোদ্ভূত

— সংযুক্তকারী

33

যখন কেউ তাদের পিতামাতার সন্তান হয়, আমরা অজাচারের একটি সত্যিই বাজে উদাহরণ দিয়ে কাজ করি। সুখের বিষয়, এটি HTML এ অসম্ভব impossible

— কোয়ান্টিন

8

স্পষ্টতার স্বার্থে কোনও সাধারণ মানুষ তাদের বাচ্চাদের তাদের সরাসরি শিশু হিসাবে ডাকতে শুনি না।

— বোল্টক্লক

41

> (এর চেয়ে বড় চিহ্ন) একটি সিএসএস সমন্বয়কারী।

একটি সমন্বয়কারী এমন একটি জিনিস যা নির্বাচকদের মধ্যে সম্পর্কের ব্যাখ্যা দেয়।

সিএসএস নির্বাচকের একাধিক সাধারণ নির্বাচক থাকতে পারে। সাধারণ নির্বাচকদের মধ্যে আমরা একটি সংযুক্তকারীকে অন্তর্ভুক্ত করতে পারি।

সিএসএস 3 তে চারটি পৃথক সংযোজক রয়েছে:

বংশধর নির্বাচক (স্থান)
শিশু নির্বাচক (>)
সংলগ্ন ভাইবোন নির্বাচক (+)
সাধারণ সহোদর নির্বাচক (~)

দ্রষ্টব্য: < সিএসএস নির্বাচনকারীদের ক্ষেত্রে বৈধ নয়।

উদাহরণ স্বরূপ:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

আউটপুট:

সিএসএস সংযুক্তকারীদের সম্পর্কে আরও তথ্য

— Premraj
সূত্র

বিকাশকারী.মোজিলা.আর.ইন-

— ললিত যাদব

@ প্রিমরাজ পিতামাতা-শিশু সিএসএস নির্বাচকদের দুর্দান্ত ব্যাখ্যার জন্য আপনাকে ধন্যবাদ!

— ওয়াইকোড

তাহলে তোমরা কি করবে মানে যখন আপনি কিছু পেতে .entry-content > * {"code" }যা দ্বারা অনুসরণ করা হয় .entry-content {"other code" }? .entry-content > *সমস্ত শিশুদের আবরণ না entry-content?

— ওয়াইকোড

14

অন্যরা যেমন উল্লেখ করেছে, এটি শিশু নির্বাচনকারী। এখানে উপযুক্ত লিঙ্ক।

http://www.w3.org/TR/CSS2/selector.html#child-selectors

— দাগ ন্যাবিট
সূত্র

লিঙ্ক জন্য আপনাকে অনেক ধন্যবাদ ! আমি সেখানে "সংলগ্ন ভাইবোন নির্বাচক "ও আবিষ্কার করেছি।

— মিশা মোরোশকো

আপনি সিটপয়েন্টে ব্রাউজার সমর্থন পাবেন । আপনার প্রকল্পগুলির জন্য গুরুত্বপূর্ণ হলে আই 6 এ কাজ করে না, অন্য কোথাও ঠিক আছে। এই সম্পদ esp হয়। ভাইবোনদের জন্য দরকারী: নবম শিশু () ইত্যাদি যেখানে সমর্থন এখনও অসম্পূর্ণ রয়েছে

— ফিলিপলস

10

এটি pক্লাসের সাথে some_classএমন উপাদানগুলির সাথে মেলে যা সরাসরি ক এর অধীনে থাকে div।

— dan04
সূত্র

5

pশ্রেণীর সাথে সমস্ত ট্যাগ some_classযা কোনও divট্যাগের প্রত্যক্ষ শিশু ।

— tschaible
সূত্র

4

এইচটিএমএল

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

CSS

div > p.some_class{
    color:red;
}

সমস্ত সরাসরি বাচ্চাদের <p>সাথে .some_classথাকা স্টাইলটি তাদের প্রয়োগ করা হবে।

— সুরজ কাবাত
সূত্র

3

(শিশু নির্বাচনকারী) সিএসএস 2-এ প্রবর্তিত হয়েছিল। ডি পি {div ডিভ এলিমেন্টের বিপরীতে সমস্ত পি উপাদান নির্বাচন করুন, যদিও ডি> পি কেবলমাত্র চাইল্ড পি উপাদানগুলি বেছে নেবেন, গ্র্যান্ড চাইল্ড নয়, দুর্দান্ত গ্র্যান্ড চাইল্ড।

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

সিএসএস সিএ সম্পর্কে আরও তথ্যের জন্য [প্রভাষক এবং তাদের ব্যবহারের জন্য, আমার ব্লগ, সিএসএস নির্বাচক এবং CSS3 নির্বাচকগুলি পরীক্ষা করুন

— অবিনাশ মালহোত্রা
সূত্র

0

সিএসএসে বৃহত্তর চিহ্ন (>) নির্বাচকের অর্থ হ'ল ডানদিকে নির্বাচক বামে যা আছে তার প্রত্যক্ষ বংশধর / সন্তান।

একটি উদাহরণ:

article > p { }

মানে কেবল অনুচ্ছেদে স্টাইল করুন যা নিবন্ধের পরে আসে।

— authentichigh
সূত্র