حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
همهٔ تمرین‌ها

انتخاب بر اساس فرزند

تمرین آسان 1084 visibility link download flag

به کد زیر توجه کنید؛ کد css بنویسید که تگ های div که داخل آنها تگ p وجود دارد را انتخاب کند و رنگ بک گراند آنها را به قرمز تغییر دهد

<div>
<p>hello</p>
</div>
<div>
<b>bold</b>
</div>
<div>
<p>hello</p>
<p>hello</p>
</div>

پاسخ‌ها 13

index.html 
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>Selection based on child</title>
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <div>
    <p>hello</p>
  </div>
  <div>
    <b>bold</b>
  </div>
  <div>
    <p>hello</p>
    <p>hello</p>
  </div>
</body>

</html>
style.css 
div p{
    background-color: red;
}
Amirabbas.jafarian HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div:has(p) {
      background-color: red;}
  </style>
</head>
/********************************/
<body>
  <div>
    <p>hello</p>
  </div>
  <div>
    <b>bold</b>
  </div>
  <div>
    <p>hello</p>
    <p>hello</p>
  </div>
</body>
</html>
Unun..ali..nunu HTML & CSS 
<!DOCTYPE html>
<html>
  <head>
    <style>
      div > p {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <div>
        <p>hello</p>
      </div>
      <div>
        <b>bold</b>
      </div>
      <div>
        <p>hello</p>
        <p>hello</p>
      </div> 
  </body>

</html>
Programmer HTML & CSS 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>انتخاب بر اساس فرزند</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      div {
        padding: 10px;
      }

      div:has(p) {
        background-color: red;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div>
      <p>hello</p>
    </div>
    <div>
      <b>bold</b>
    </div>
    <div>
      <p>hello</p>
      <p>hello</p>
    </div>
  </body>
</html>
Komeil.moradi HTML & CSS 
<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device.width, initial-scale=1.0">
  <title> pسلکت تگ های </title>
  </head>
  <style>
    div:has(p) {
    background-color: red;
}
  </style>
<body>
    <div>
        <p>hello</p>
      </div>
      <div>
        <b>bold</b>
      </div>
      <div>
        <p>hello</p>
        <p>hello</p>
      </div>
</body>
</html>
Hadi.jalooli HTML & CSS 
<!DOCTYPE html>
<html>
<head>
    <title>FORM</title>
    <link rel="stylesheet" href="project.css" type="text/css">
</head>
<body>
    <div>
        <p>hello</p>
      </div>
      <div>
        <b>bold</b>
      </div>
      <div>
        <p>hello</p>
        <p>hello</p>
      </div> 
</body>
</html>
<!--css-->
*{
    padding: 0px;
    margin: 0xp;
    font-style: italic;
    box-sizing: border-box;
}
div > p{
    color: red;
}
Mohammad.mahdi88 HTML & CSS 
div p{
    background-color:red;
}
Zaras HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Training</title>
  <style>
   div > p{
    background-color: red;
    width: 150px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    border-radius: 20px;
    padding: 8px;
  }
  p:hover{
    background-color: black;
    color: red;
  }
  </style>
</head>
<body>

  <div>
    <p>hello hahahaha</p>
  </div>
  <div>
    <b>bold as f</b>
  </div>
  <div>
    <p>hello tala</p>
    <p>hello khargoosh</p>
  </div>

</body>
</html>
Mhrshad.jfri HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>انتخاب بر اساس فرزند</title>
    <style>
        div p{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
    <div>
        <p>hello</p>
      </div>
      <div>
        <b>bold</b>
      </div>
      <div>
        <p>hello</p>
        <p>hello</p>
    </div>
</body>
</html>
F.sarli HTML & CSS 
<!DOCTYPE html>
<html lang="en";>
<head>
<meta charset="UTF-8">
<meta name="viewport " content="width=device-width,intial-scale=1.0">
<title> box</title>
<style>
div>p{
    background-color: red;
}
div{
    background-color: aqua;
}
</style> 
</head>
<body>
<div >
<p>dfghjk</p>
</div>
<div>
    cfghjkl</div>
</body>
</html>
Maryam.n HTML & CSS

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن