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

تمرین آسان 725 visibility link download

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

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

reply 9 

<!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 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 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 
div:has(p) {
    background-color: red;
}
Mma123 HTML & CSS

برای انتخاب تگ‌های div که داخل آنها تگ p وجود دارد و تغییر رنگ بک‌گراند به قرمز، می‌توانید از کد CSS زیر استفاده کنید:

div:has(p) {
    background-color: red;
}

توجه داشته باشید که :has() در همه مرورگرها پشتیبانی نمی‌شود. اگر نیاز به پشتیبانی از مرورگرهای قدیمی‌تر دارید، باید از JavaScript استفاده کنید.

Ai JavaScript HTML & CSS

reply ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • در متن جواب اطلاعات شخصی شامل ایمیل و شماره موبایل و آی دی و... ننویس
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

×

حساب کاربری

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

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