সবার জন্য সিএসএস 3 নির্বাচনকারী প্রশ্ন প্রথম নির্বাচন করুন

Question

নিম্নলিখিত মার্কআপের সাথে আমি একটি সিএসএস নির্বাচককে সমস্ত বিকল্পের মধ্যে প্রথম নির্বাচন মেনু ব্যতীত সমস্তটি নির্বাচন করতে চাই - যার মধ্যে অনেকগুলি থাকতে পারে:

<div class="options">
    <div class="opt1">
        <select title="Please choose Warranty">
            <option value="">Select Waranty</option>
            <option value="1">1 year guarantee</option>
            <option value="2">3 year guarantee</option>
        </select>
    </div>
    <div class="opt2">
        <select title="Please choose Color">
            <option value="">Select Color</option>
            <option value="1">Red</option>
            <option value="2">Blue</option>
        </select>
    </div>
    <div class="opt3">
        <select title="Please choose Size">
            <option value="">Select Size</option>
            <option value="1">Small</option>
            <option value="2">Big</option>
        </select>
    </div>
</div>

আমি প্রোটোটাইপের মধ্যে এটি ব্যবহার করছি যার প্রায় পুরো সিএস 3 নির্বাচনকারী সমর্থন রয়েছে তাই ব্রাউজার সমর্থনের দ্বারা উদ্বিগ্ন নয়।

প্রাথমিক নির্বাচক এমন কিছু হবে:

div.options div select

আমি কয়েকটি প্রকরণের চেষ্টা করেছি nth-childএবং :not(:first-child)এটি কার্যকর হবে বলে মনে হচ্ছে না।

Answer 1

দেখুন: http://jsfiddle.net/uDvEt/1/

.options > div:not(:first-child) select { background:yellow;}

Answer 2

আপনি নির্বাচন করার অপশন প্রয়োজন divপরিবর্তে গুলি selectগুলি ব্যবহার করে যখন :not(:first-child)কারণ যে, selectতার পিতা বা মাতা প্রথম (এবং শুধুমাত্র) সন্তান div:

div.options > div:not(:first-child) > select

এর বিকল্পটি :not(:first-child)হ'ল :nth-child()2 এর প্রারম্ভিক অফসেট সহ ব্যবহার করা:

div.options > div:nth-child(n + 2) > select

আরেকটি বিকল্প হ'ল সাধারণ ভাইবাল সংযুক্তকারী ~(যা আই 7 + দ্বারা সমর্থিত) সাথে রয়েছে:

div.options > div ~ div > select

Comments

অতিরিক্ত তথ্যের জন্য ধন্যবাদ, অন্য উত্তরটিও সঠিক বলে গ্রহণ করে এবং প্রথমে এসেছিল।

— রবজমিল

আপনি যদি পুরানো আইইএস সম্পর্কে উদ্বিগ্ন হন তবে আমি একটি তৃতীয় সমাধান যুক্ত করেছি।

— বোল্টক্লক

Answer 3

.options > div:nth-child(n+2) select