css - এমএল - কিভাবে html তৈরি করা যায়

আপনার নির্বাচক সাথে মেলে, উপাদানটি অবশ্যই red একটি ক্লাস নাম থাকতে হবে এবং তার পিতামাতার প্রথম সন্তান হতে হবে।

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

আপনি nth-of-type (1) ব্যবহার করতে পারেন তবে এটি নিশ্চিত করুন যে সাইটের IE7 ইত্যাদি সমর্থন করার প্রয়োজন নেই, যদি এই ক্ষেত্রে শরীরটি বডি ক্লাস যোগ করার জন্য jQuery ব্যবহার করে তবে আই 7 শরীরের শ্রেণির মাধ্যমে উপাদানটি খুঁজে বের করুন, তারপরে উপাদান নামটি যোগ করুন। এটা nth-child স্টাইলিং।

আপনি এটি পেতে এটির মতো আপনার কিছু কোড পরিবর্তন করতে পারেন

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

এই আপনার জন্য কাজ করে

.home span + .red{
      border:3px solid green;
    }

এখানে এটি সম্পর্কে SnoopCode থেকে একটি CSS রেফারেন্স রয়েছে।

আমি তালিকার জন্য একটি ব্যাকগ্রাউন্ড ইমেজ আছে নীচের সিএসএস ব্যবহার করছি

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}

<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

আমি বিশ্বাস করি যে আপেক্ষিক নির্বাচক ব্যবহার করে অবিলম্বে স্থাপন করা উপাদানগুলি নির্বাচন করার জন্য এখানে সেরা কাজ করে (যেমন আগে প্রস্তাবিত)।

এই ক্ষেত্রে এই নির্বাচক ব্যবহার করা সম্ভব

.home p:first-of-type

কিন্তু এই উপাদান নির্বাচক না ক্লাস এক।

এখানে আপনার সিএসএস নির্বাচকদের চমৎকার তালিকা রয়েছে: https://kolosek.com/css-selectors/

এই সমাধান চেষ্টা করুন:

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

কোডপেন লিঙ্ক

কিছু কারণের জন্য উপরে উল্লেখিত কোনও উত্তর আসল প্রথম এবং শুধুমাত্র পিতামাতার প্রথম সন্তানের ক্ষেত্রে কথা বলে মনে হচ্ছে।

#element_id > .class_name:first-child

আপনি যদি এই কোডের মধ্যে শুধুমাত্র প্রথম শ্রেণীর সন্তানের শৈলী প্রয়োগ করতে চান তবে উপরের সমস্ত উত্তর ব্যর্থ হবে।

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

লেখকগণের সবচেয়ে সুপরিচিত উদাহরণগুলির মধ্যে এটি একটি ভুল বোঝাবুঝি যা :first-child কাজ করে। CSS2 এ উপস্থাপিত , এটি :first-child ছদ্ম-শ্রেণী তার পিতামাতার প্রথম সন্তানের প্রতিনিধিত্ব করে । এটাই. যৌগিক নির্বাচক দ্বারা নির্ধারিত শর্তগুলির সাথে মেলে এমন যে কোনও শিশু উপাদান প্রথমটি বাছাই করা একটি সাধারণ ধারণা। উপায় নির্বাচকরা কাজ করে (একটি ব্যাখ্যা জন্য here দেখুন), যে সহজভাবে সত্য নয়।

সিলেক্টর লেভেল 3 প্রবর্তন করে :first-of-type ছদ্ম-শ্রেণি , যা তার উপাদান প্রকারের ভাইবোনদের মধ্যে প্রথম উপাদানটি উপস্থাপন করে। এই উত্তর ব্যাখ্যা করে, চিত্রের সাথে পার্থক্য :first-child এবং :first-of-type । যাইহোক, যেমন :first-child , এটি অন্য কোনও শর্ত বা বৈশিষ্ট্যগুলিতে দেখায় না। এইচটিএমএল, উপাদান টাইপ ট্যাগ নাম দ্বারা প্রতিনিধিত্ব করা হয়। প্রশ্ন, যে ধরনের p ।

দুর্ভাগ্যবশত, কোনও অনুরূপ নেই :first-of-class প্রদত্ত শ্রেণির প্রথম সন্তানের উপাদানটির সাথে মেলে ধরার জন্য প্রথম :first-of-class ছদ্ম-ক্লাস। লিয়া ভেরো এবং আমি এইরকম একটি সমাধান (যদিও সম্পূর্ণভাবে স্বাধীনভাবে) এর জন্য এসেছি তা হলো প্রথম শ্রেণীর সাথে আপনার সমস্ত উপাদানগুলিতে আপনার পছন্দসই শৈলী প্রয়োগ করা:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... তারপরে ক্লাসের সাথে উপাদানগুলির শৈলীগুলি "পূর্বাবস্থায় ফিরিয়ে আনুন" যা প্রথমটির পরে আসে , সাধারণ ভাইবোন সংযোজক ব্যবহার করে ~ একটি overriding নিয়মে:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

এখন শুধুমাত্র class="red" সাথে প্রথম উপাদান class="red" একটি সীমানা থাকবে।

এই নিয়মগুলি কীভাবে প্রয়োগ করা হয় তার একটি উদাহরণ এখানে দেওয়া হয়েছে:

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

1. কোন নিয়ম প্রয়োগ করা হয় না; কোন সীমানা রেন্ডার করা হয়।
   এই উপাদানটি ক্লাস red , তাই এটি বাদ দেওয়া হয়।

2. শুধুমাত্র প্রথম নিয়ম প্রয়োগ করা হয়; একটি লাল সীমানা রেন্ডার করা হয়।
   এই উপাদানটি শ্রেণিবদ্ধ red , তবে এটি তার পিতামাতার মধ্যে red কোনও উপাদান দ্বারা পূর্ববর্তী নয়। সুতরাং দ্বিতীয় নিয়ম প্রয়োগ করা হয় না, শুধুমাত্র প্রথম, এবং উপাদান তার সীমানা রাখে।

3. উভয় নিয়ম প্রয়োগ করা হয়; কোন সীমানা রেন্ডার করা হয়।
   এই উপাদান ক্লাস red । এটি red সাথে অন্তত এক অন্যান্য উপাদান দ্বারাও পূর্ববর্তী। সুতরাং উভয় নিয়ম প্রয়োগ করা হয়, এবং দ্বিতীয় border ঘোষণাকে প্রথমবার ওভাররাইড করা হয়, যার ফলে এটি "পূর্বাবস্থায় ফিরিয়ে আনা" হয়।

বোনাস হিসাবে, যদিও এটি সিলেক্টর 3 তে প্রবর্তিত হয় তবে জেনারেল ভাইবোন সংযোজকটি আই 7 এবং এর চেয়েও পুরোপুরি সমর্থিত :first-of-type মতো এবং :nth-of-type() যা শুধুমাত্র IE9 দ্বারা সমর্থিত । আপনি ভাল ব্রাউজার সমর্থন প্রয়োজন হলে, আপনি ভাগ্য।

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

• আপনি এটিকে চারপাশে কাজ করতে ব্যবহার করতে পারেন :first-of-type শ্রেণির IE7 এবং IE8 এ, কেবল বর্গ নির্বাচকর পরিবর্তে টাইপ নির্বাচক সরবরাহ করে (আবার, পরবর্তী বিভাগে তার ভুল ব্যবহারে আরও বেশি):

  article > p {
      /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
  }
  
  article > p ~ p {
      /* Undo the above styles for every subsequent article > p */
  }

• আপনি শ্রেণী পরিবর্তে নির্বাচক বা অন্য কোন সাধারণ নির্বাচক দ্বারা ফিল্টার করতে পারেন।

• ছদ্ম-উপাদানের টেকনিক্যালি সহজ নির্বাচক নয় তবে আপনি ছদ্ম-উপাদানের সাথে এই overriding কৌশলটি একত্রিত করতে পারেন।

মনে রাখবেন যে এটি কাজ করার জন্য, আপনার পূর্বের ভাইবোনগুলির জন্য কী ডিফল্ট শৈলীগুলি হবে তা অগ্রিম জানাতে হবে যাতে আপনি প্রথম নিয়মটি ওভাররাইড করতে পারেন। উপরন্তু, এই সিএসএসের নিয়মগুলি বাতিল করার সাথে সাথে, আপনি সিলেক্টর এপিআই , বা সেলেনিয়ামের সিএসএস লোকেটারগুলির সাথে ব্যবহারের জন্য একক সিলেক্টরের সাথে একই জিনিস অর্জন করতে পারবেন না।

এটি উল্লেখযোগ্য যে নির্বাচক 4 এটিকে বর্ধিত করে :nth-child() নোটেশন (মূলত সম্পূর্ণরূপে একটি নতুন ছদ্ম-শ্রেণি বলা হয় :nth-match() ), যা আপনাকে কিছু ব্যবহার করার অনুমতি দেবে :nth-child(1 of .red) একটি hypothetical পরিবর্তে .red:first-of-class । অপেক্ষাকৃত সাম্প্রতিক প্রস্তাব হিসাবে, এটি এখনও উত্পাদন সাইটগুলিতে ব্যবহারযোগ্য হওয়ার জন্য পর্যাপ্ত আন্তঃপরিকল্পনা বাস্তবায়ন নেই। আশা করি এই শীঘ্রই পরিবর্তন হবে। ইতোমধ্যে, আমি প্রস্তাবিত কাজকর্ম অধিকাংশ ক্ষেত্রে জন্য কাজ করা উচিত।

মনে রাখবেন যে এই উত্তরটি অনুমান করে যে প্রশ্নটি প্রতিটি প্রথম সন্তানের উপাদানটির সন্ধান করছে যা একটি প্রদত্ত শ্রেণী রয়েছে। সমগ্র ডকুমেন্ট জুড়ে একটি জটিল নির্বাচক এর এনথ ম্যাচের জন্য একটি ছদ্ম-শ্রেণী বা এমনকি জেনেরিক সিএসএস সমাধান নেই - একটি সমাধান বিদ্যমান নথির কাঠামোর উপর ব্যাপকভাবে নির্ভর করে কিনা। jQuery প্রদান করে :eq() :first :last এই উদ্দেশ্যটির জন্য :last এবং আরো, তবে আবার মনে রাখবেন যে তারা খুব ভিন্নভাবে কাজ করে :nth-child() et al । সিলেক্টর API ব্যবহার করে, আপনি প্রথম document.querySelector() ব্যবহার করতে পারেন:

var first = document.querySelector('.home > .red');

অথবা কোনো নির্দিষ্ট ম্যাচ বাছাই করার জন্য indexer সঙ্গে document.querySelectorAll() ব্যবহার করুন:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

ফিলিপ ডুবেমিয়ারের মূল গৃহীত উত্তরগুলিতে .red:nth-of-type(1) সমাধানটি (যা মূলত Martyn দ্বারা লিখিত ছিল তবে মুছে ফেলা হয়েছে) হলেও, এটি আপনার প্রত্যাশিত পদ্ধতির সাথে আচরণ করে না।

উদাহরণস্বরূপ, যদি আপনি শুধুমাত্র আপনার আসল মার্কআপে পিকে নির্বাচন করতে চান:

<p class="red"></p>
<div class="red"></div>

... তারপর আপনি ব্যবহার করতে পারবেন না। .red:first-of-type ( .red:nth-of-type(1) সমতুল্য), কারণ প্রতিটি উপাদানটি প্রথম (এবং শুধুমাত্র) এর একটি প্রকার ( p এবং div যথাক্রমে), তাই উভয় নির্বাচক দ্বারা মিলিত হবে।

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

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

.red:first-of-type সাথে একটি নিয়ম প্রয়োগ করা হচ্ছে .red:first-of-type কাজ করবে, কিন্তু একবার আপনি ক্লাস ছাড়াই অন্য কোন p যুক্ত করবেন:

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

... নির্বাচক অবিলম্বে ব্যর্থ হবে, কারণ প্রথম .red উপাদান এখন দ্বিতীয় p উপাদান।

শুধুমাত্র প্রথম এবং শুধুমাত্র একটি অনুচ্ছেদ প্রয়োজন লাল করা। কিভাবে?

<!DOCTYPE html><html><head><style>

article p:nth-child(1){background: red}
article p:first-child{background: red}

</style></head><body>

<p style="color:blue">Needed only first and only one paragraph had red. How?</p>

<article>
<p>The first paragraph.</p>
<div><p>The second paragraph.</p></div>
<p>The third paragraph.</p>
<div><p>The fourth paragraph.</p></div>
</article>

</body></html>

:first-child নির্বাচক অভিপ্রেত, যেমন নাম বলে, অভিভাবক ট্যাগের প্রথম সন্তানের নির্বাচন করতে হয়। শিশুদের একই পিতামাতার ট্যাগ এমবেড করা আছে। আপনার সঠিক উদাহরণ কাজ করবে (শুধু here চেষ্টা করে দেখুন):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

হয়তো আপনি বিভিন্ন ট্যাগ মধ্যে আপনার ট্যাগ nested আছে? আপনার ট্যাগ red ট্যাগ মূলত পিতামাতার অধীনে প্রথম ট্যাগ?

লক্ষ্য করুন যে এটি শুধুমাত্র সমগ্র নথিতে প্রথম যেমন ট্যাগটিতে প্রযোজ্য নয়, তবে প্রতিবার একটি নতুন পিতা-মাতা তার চারপাশে মোড়ানো হয়, যেমন:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

first এবং third তারপর লাল হবে।

হালনাগাদ:

আমি জানি না কেন মার্টিন তার উত্তরটি মুছে ফেলেন, কিন্তু তার সমাধান ছিল, এনটি :nth-of-type নির্বাচক:

<html>
<head>
<style type="text/css">
.red:nth-of-type(1)
{
    border:5px solid red;
} 
</style>
</head>

<body>
    <div class="home">
        <span>blah</span>
        <p class="red">first</p>
        <p class="red">second</p>
        <p class="red">third</p>
        <p class="red">fourth</p>
    </div>
</body>
</html>

Martyn ক্রেডিট। here উদাহরণস্বরূপ আরো infos। সচেতন থাকুন এটি একটি সিএসএস 3 নির্বাচক, সুতরাং সকল ব্রাউজার এটি সনাক্ত করবে না (যেমন IE8 বা পুরোনো)।

এই সহজ এবং কার্যকরী চেষ্টা করুন

 .home > span + .red{
      border:1px solid red;
    }