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

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

تمرین آسان 1031 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>

reply 12

visibility 
<!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
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>
  <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 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 
div:has(p) {
    background-color: red;
}
Mma123 HTML & CSS
<< صفحه قبل 1 2 صفحه بعد >>

ارسال جواب

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

×

حساب کاربری

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

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