CSS قاعدة لسمة + الأخوة في دوم

Question

ما لدي هو شكل بحقل واحدة تحتوي على عدة أكياس أخرى. لكل حقل، يمكن للمستخدم التحقق من مربع بجوار الأسطورة وتوسيع تلك الحقلة (من الناحية النظرية، على الأقل). كنت أفكر أنه سيكون رائعا في محاولة استخدام CSS الخالص للتأثير، لكنني أحصل على كيفية كتابة القاعدة بناء على موقف العنصرين إلى بعضها البعض في DOM. إليك HTML:

 <fieldset id="areasofinterest">
     <legend>Areas of Interest Survey</legend>

 <p>Please Check The Areas Applicable to you and Answer the Coorepsonding Questions.</p>

<!--Area 1 Checkbox and Questions -->
<fieldset class="area">
    <legend>
        <input type="checkbox" value="area1" id="area1" />
        <label for="area1"> Area 1 :</label>
    </legend>
    <ul>
        <li>
            <label for="area1_q1">Q1</label>
            <input type="text" name="area1_q1" id="area1_q1" />
        </li>
        <li>
            <label for="area1_q2">Q2</label>
            <input type="text" name="area1_q2" id="area1_q2" />
        </li>
    </ul>
</fieldset>

<!--Area 2 Checkbox and Questions -->
<fieldset class="area">
    <legend>
        <input type="checkbox" value="area2" id="area2" />
        <label for="other"> Area 2 :</label>
    </legend>

    <ul>
        <li>
            <label for="area2_q1">Q1</label>
            <input type="text" name="area2_q1" id="area2_q1" />
        </li>
        <li>
            <label for="area2_q2">Q2</label>
            <input type="text" name="area2_q2" id="area2_q2" />
        </li>
    </ul>
</fieldset>

  </fieldset>

في البداية، بدا الفكرة الاختراق بعض الشيء بالنسبة لي، لكنني ركضت من خلال W3C Validator، و Yipiee مرت بمدخلات جزءا لا يتجزأ داخل الأساطير. لذلك أنا متأكد من أنني أستطيع الحصول على ما أنا بعد استخدام JavaScript / jQuery، لكنني أكره على الأقل دليل على المفهوم للقيام بذلك مع CSS، حتى لو كان المتصفحات الأقدم قد لا يدعمها.

حاولت هذه القاعدة:

.area ul {
    color: red;
 }

 .area input:checked + ul {
    color: blue;
 }

ولكن دون حظ. أكدت اختبار أبسط بكثير أن كلا المتصفحات التي أعمل معها (Chrome، FF 3.5) يمكن القيام به input:checked + ul إذا كان الأمر ببساطة إدخال يتبعه ul. وهو يقوم بتبديل الألوان إذا كان لدي كلا القواعد (في النسخة المبسطة).

لكنني لست متأكدا مما إذا كانت هناك طريقة للإشارة إلى UL إذا كان العنصر المحدد هو علامة الأسطورة وبالتالي لا أشقاء مباشر من UL. هل هناك ربما هناك طريقة ليقول "أشقاء الأساطير التي تحتوي على مدخلات تم فحصها ..."؟

شكرا للمساعدة.

Answer 1

لا.

"أشقاء الأساطير التي تحتوي على مدخلات يتم فحصها ..."

مشكلتك في خطوة "تحتوي على". لا يمكنك نقل ما يصل دوم هكذا. لا يمكن تحديد عنصر في CSS بناء على الأطفال (أو محتويات الأطفال أو السمات).

كما تستخدم عنصر النموذج للتفاعل المرئي (وأسطورة)، وهو أمر غريب. أعتقد أنك أفضل حالا مع جافا سكريبت. يمكنني أن أتخيل حلول CSS فقط فقط، ولكن لا شيء أتوقع أن أكون متوافقا من المتصفح بما يكفي للثقة مع الاختباء وإظهار النماذج.

Answer 2

من الواضح أن المحدد المجاور (+) يختار عناصر مجاورة. تحتاج إلى محدد أحد الوالدين، والذي لسوء الحظ غير موجود (على الرغم من بعض المقترحات المقدمة إلى W3C في الماضي).

جافا سكريبت (ParentNode) هو الخيار الوحيد.

Answer 3

فكرتي الأولى، هي أن هذا لن يعمل مع CSS وحده. لا أعتقد أنك ستتمكن من القيام بذلك دون جافا سكريبت. يمكنك استخدام المحددين في JQuery، على سبيل المثال واحصل على العقدة الأصل من خلال JavaScript.

أيضا، تساءلت عما إذا كان، بعد "التحقق من" خانة الاختيار، سيتطابق نمط CSS الإدخال [فحص = "تم التحقق منه"] ... مثل:

إيداع .Area + ul {// غير موسع}

إشراف .Area [فحص = "تم التحقق منها"] + ul {// الموسعة}

لم ينجح ذلك، لذلك كنت بحاجة إلى استخدام JavaScript فقط لتنفيذ التغيير في فحص / غير محدد. كنت أستخدم شيئا آخر غير مربع اختيار كما هو مقترح سابقا أيضا.