: প্রথম সন্তান প্রত্যাশার মতো কাজ করছে না

Question 1

আমি একটি ক্লাস নামে h1একটি divসঙ্গে প্রথম নির্বাচন করার চেষ্টা করছি detail_container। এটি এর মধ্যে যদি h1প্রথম উপাদান হয় তবে এটি কাজ করে div, তবে এটি যদি পরে আসে তবে এটি ulকাজ করবে না।

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

আমি এই ছাপে ছিলাম যে সিএসএস আমার কাছে আছে h1এটি যেখানেই থাকুক না কেন প্রথম নির্বাচন করবে div। আমি কীভাবে এটি কাজ করতে পারি?

Question 2

h1:first-childনির্বাচক উপায়ে

যদি এটির h1উপাদান থাকে তবে কেবল তার পিতামাতার প্রথম সন্তানের নির্বাচন করুন ।

এখানকার :first-childধারকটি হ'ল ulএবং এগুলি সন্তুষ্ট করতে পারে না h1:first-child।

:first-of-typeআপনার ক্ষেত্রে সিএসএস 3 রয়েছে :

.detail_container h1:first-of-type
{
    color: blue;
}

তবে ব্রাউজারের সামঞ্জস্যতা হ'ল এবং কী নয়, আপনি প্রথম h1শ্রেণি দেওয়ার চেয়ে ভাল

.detail_container h1.first
{
    color: blue;
}

Question 3

:first-childপ্রথমটি নির্বাচন করে h1 যদি এবং কেবলমাত্র যদি এটির প্যারেন্ট উপাদানগুলির প্রথম সন্তান। আপনার উদাহরণে, এর ulপ্রথম সন্তান div।

সিউডো-ক্লাসের নামটি কিছুটা বিভ্রান্তিকর, তবে এটি বেশ স্পষ্টভাবে এখানে বর্ণিত হয়েছে ।

jQuery এর :firstনির্বাচক আপনি যা খুঁজছেন তা আপনাকে দেয়। তুমি এটি করতে পারো:

$('.detail_container h1:first').css("color", "blue");

Question 4

নির্দিষ্ট ক্ষেত্রে আপনি ব্যবহার করতে পারেন:

.detail_container > ul + h1{ 
    color: blue; 
}

তবে অনেক ক্ষেত্রে যদি আপনার একই নির্বাচকের প্রয়োজন হয়, তবে বোল্টক্লক যেমন বলেছিল, তাদের জন্য আপনার একটি ক্লাস থাকা উচিত।

Question 5

আপনি ব্যবহার করতে পারেন

.detail_container h1:nth-of-type(1)

অন্য কোনও সংখ্যা দ্বারা 1 নম্বর পরিবর্তন করে আপনি অন্য কোনও এইচ 1 আইটেম নির্বাচন করতে পারেন।

Question 6

আপনি নিজের h1ট্যাগগুলিকে অন্যটিতে মোড়াতে পারেন divএবং তারপরে প্রথমটি হ'ল first-child। এটি divএমনকি শৈলী প্রয়োজন হয় না। এই শিশুদের আলাদা করার একমাত্র উপায়।

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

Question 7

উপাদানটি <body>ট্যাগ থেকে সরাসরি উত্তরাধিকারী হতে পারে না । আপনি এটি একটি <dir style="padding-left:0px;"></dir>ট্যাগ লাগানোর চেষ্টা করতে পারেন ।