freeCodeCamp

4.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
58c383d33e2e3259241f3076	Use Attribute Selectors to Style Elements	0		استخدم محددات السمات لعناصر النمط

Description

لقد كنت تعطي سمات id أو class إلى العناصر التي ترغب في تحديد أسلوبها. تُعرف هذه المعرّفات باسم محددات الهوية والفئة. هناك محددات CSS أخرى يمكنك استخدامها لتحديد مجموعات مخصصة من العناصر إلى النمط. دعونا نخرج CatPhotoApp مرة أخرى لممارسة استخدام CSS Selectors. بالنسبة لهذا التحدي ، ستستخدم محدد السمة [attr=value] لتمييز مربعات الاختيار في CatPhotoApp. يتطابق هذا المحدد وعناصر الأنماط مع قيمة سمة محددة. على سبيل المثال ، يؤدي التعليمة البرمجية أدناه إلى تغيير هوامش جميع العناصر type السمة وقيمة مماثلة radio :

[type = 'radio'] {
الهامش: 20px 0px 20px 0px؛
}

Instructions

باستخدام محدد السمة type ، حاول إعطاء مربعات الاختيار في CatPhotoApp هامشًا أعلى من 10 بكسل وهامشًا سفليًا يبلغ 15 بكسل.

Tests

tests:
  - text: يجب استخدام محدد السمة <code>type</code> لتحديد مربعات الاختيار.
    testString: 'assert(code.match(/<style>[\s\S]*?\[type=("|")checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi),"The <code>type</code> attribute selector should be used to select the checkboxes.");'
  - text: يجب أن تكون الهوامش العلوية لمربعات الاختيار 10 بكسل.
    testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginTop") === "10px") {count++;}});return (count===3)}()),"The top margins of the checkboxes should be 10px.");'
  - text: يجب أن تكون الهوامش السفلية لمربعات الاختيار 15 بكسل.
    testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginBottom") === "15px") {count++;}});return (count===3)}()),"The bottom margins of the checkboxes should be 15px.");'

Challenge Seed

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  .silver-background {
    background-color: silver;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div class="silver-background">
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Solution

// solution required

4.3 KiB Raw Blame History