html - সিএসএস সর্বশেষ বাছাই নির্বাচক: নির্দিষ্ট ক্লাস শেষ উপাদান, পিতামাতার ভিতরে শেষ সন্তান না?




css css3 (4)

আপনি উপাদান ভাসমান হয় আপনি ক্রম বিপরীত করতে পারেন

অর্থাৎ float: right; পরিবর্তে float: left;

এবং তারপর ক্লাসের প্রথম সন্তানের নির্বাচন করার জন্য এই পদ্ধতিটি ব্যবহার করুন।

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

এটি আসলে কেবল সর্বশেষ সংস্করণে ক্লাসটি প্রয়োগ করছে কারণ এটি এখন বিপরীত ক্রমে রয়েছে।

এখানে আপনার জন্য একটি কাজ উদাহরণ:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

আমি #com19 নির্বাচন করতে চান?

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

যেহেতু আমার কাছে অন্য div.something আছে যতদিন কাজ করে না। div.something প্রকৃত শিশুর হিসাবে কিছু। article.comment সর্বশেষ চেহারাটি নির্বাচন করতে এই ক্ষেত্রে শেষ সন্তানের নির্বাচক ব্যবহার করা কি সম্ভব?

jsFiddle


আমার মনে হয় এমন কিছু এখানে মন্তব্য করতে হবে যা আমার জন্য কাজ করেছে:

ব্যবহার করুন :last-child স্থানগুলিতে একাধিকবার প্রয়োজন যাতে এটি সর্বদা সর্বশেষের শেষ পায়।

উদাহরণস্বরূপ এই নিন:

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>


এই সমাধান সম্পর্কে কি?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}

:last-child কেবল তখনই কাজ করে যখন প্রশ্ন উপাদানটি ধারকটির শেষ সন্তান, কোনও নির্দিষ্ট ধরণের উপাদানটির শেষ নয়। এর জন্য, আপনি চান :last-of-type

http://jsfiddle.net/C23g6/3/

@ বোল্টক্লকের মন্তব্য অনুসারে, এটি শুধুমাত্র শেষ article উপাদানটি পরীক্ষা করছে, না .comment এর ক্লাসের সাথে শেষ উপাদান।

এইচটিএমএল

<div class="commentList">
    <article class="comment " id="com21"></article>

    <article class="comment " id="com20"></article>

    <article class="comment " id="com19"></article>

    <div class="something"> hello </div>
</div>

CSS

body {
    background: black;
}

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-of-type {
    border-bottom:none;
    margin-bottom:0;
}




css-selectors