আপনি যদি উপাদানগুলি ভাসাচ্ছেন তবে আপনি ক্রমটি বিপরীত করতে পারেন
অর্থাত্ 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>