css - শিশু উপাদানগুলিতে সিএসএস স্টাইল প্রয়োগ করুন

css-selectors (5)

আপনি যদি সব সন্তানের শৈলী যোগ করতে চান এবং এইচটিএমএল ট্যাগের জন্য কোন স্পেসিফিকেশন না চান তবে এটি ব্যবহার করুন।

মূল ট্যাগ div.parent

div.parent ভিতরে সন্তানের ট্যাগ <a> , <input> , <label> ইত্যাদি মত।

কোড: div.parent * {color: #045123!important;}

আপনি গুরুত্বপূর্ণ অপসারণ করতে পারেন, এটি প্রয়োজন হয় না

আমি শুধুমাত্র নির্দিষ্ট ক্লাসের সাথে ডিভিভির টেবিলে শৈলী প্রয়োগ করতে চাই:

নোট: আমি বরং শিশু উপাদানগুলির জন্য একটি CSS-selector ব্যবহার করব।

কেন # 1 কাজ এবং # 2 না?

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

div.test th, td, caption {padding:40px 100px 40px 50px;}

এইচটিএমএল:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

আমি কি ভুল করছি?

এই কোডটি " div.test th, td, caption {padding:40px 100px 40px 50px;} " সমস্ত উপাদানগুলিতে একটি নিয়ম প্রয়োগ করে যা একটি বিভাগের সাথে div উপাদান দ্বারা থাকে, সমস্ত td উপাদান এবং সমস্ত caption ছাড়াও উপাদান।

এটি " td , th এবং caption উপাদানগুলির মতো নয় যা" test ক্লাসের সাথে div উপাদান দ্বারা থাকে। " আপনি আপনার নির্বাচক পরিবর্তন করতে হবে যে অর্জন করতে:

' > ' পুরোনো ব্রাউজারগুলির দ্বারা পুরোপুরি সমর্থিত নয় (আমি আপনাকে দেখছি, ইন্টারনেট এক্সপ্লোরার)।

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

যতদূর আমি এই জানি:

div[class=yourclass] table {  your style here; }

অথবা আপনার ক্ষেত্রে এমনকি এই:

div.yourclass table { your style here; }

(তবে এটি আপনার yourclass উপাদানগুলির জন্য কাজ করবে যা yourclass নাও হতে পারে) আপনার yourclass ভিতরে কেবলমাত্র টেবিলগুলিকে প্রভাবিত করবে। এবং, কেন হিসাবে বলেছেন,> সর্বত্র সমর্থিত নয় (এবং div[class=yourclass] too, তাই শ্রেণীগুলির বিন্দু নোট ব্যবহার করুন)।

> selector সরাসরি সন্তানদের, সরাসরি বংশধরদের সাথে মেলে না।

তুমি চাও

div.test th, td, caption {}

বা আরো সম্ভবত

div.test th, div.test td, div.test caption {}

সম্পাদনা:

প্রথম এক বলেছেন

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

যেখানে দ্বিতীয় বলে

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

আপনার মূলত div.test > th any <th> which is a **direct** child of <div class="test"> div.test > th any <th> which is a **direct** child of <div class="test"> , যার মানে এটি <div class="test"><th>this</th></div> মিলবে <div class="test"><th>this</th></div> কিন্তু <div class="test"><table><th>this</th></table></div> মেলে না

.test * {padding: 40px 100px 40px 50px;}