.ﺪﻫﺩ ﯽﻣ ﺢﯿﺿﻮﺗ ﺍﺭ ﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﻦﯿﺑ ﻪﻄﺑﺍﺭ ﻪﮐ ﺖﺳﺍ ﯼﺰﯿﭼ ﻩﺪﻨﻨﮐ ﺐﯿﮐﺮﺗ
ﻩﺩﺎﺳ ﻦﯿﺑ .ﺪﺷﺎﺑ ﻩﺩﺎﺳ ﺮﮕﺑﺎﺨﺘﻧﺍ ﮏﯾ ﺯﺍ ﺶﯿﺑ ﻞﻣﺎﺷ ﺪﻧﺍﻮﺗ ﯽﻣ CSS ﺮﮕﺑﺎﺨﺘﻧﺍ ﮏﯾ
:ﺩﺭﺍﺩ ﺩﻮﺟﻭ CSS ﺭﺩ ﻒﻠﺘﺨﻣ ﻩﺪﻨﻨﮐ ﺐﯿﮐﺮﺗ ﺭﺎﻬﭼ
(ﺎﻀﻓ) ﻞﺴﻧ ﺮﮕﺑﺎﺨﺘﻧﺍ
(<) ﮎﺩﻮﮐ ﺮﮕﺑﺎﺨﺘﻧﺍ
(+) ﺭﻭﺎﺠﻣ ﺭﺩﺍﺮﺑ ﻭ ﺮﻫﺍﻮﺧ ﺮﮕﺑﺎﺨﺘﻧﺍ
(~) ﯽﻣﻮﻤﻋ ﺭﺩﺍﺮﺑ ﻭ ﺮﻫﺍﻮﺧ ﺮﮕﺑﺎﺨﺘﻧﺍ
ﺩﺭﺍﺩ ﺖﻘﺑﺎﻄﻣ ﺪﻨﺘﺴﻫ ﻩﺪﺷ ﺺﺨﺸﻣ ﮏﯾ ﻥﺎﮔﺩﺍﻮﻧ ﻪﮐ ﯼﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﺎﺑ ﺩﺍﻮﻧ ﺮﮕﺑﺎﺨﺘﻧﺍ
:ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ <div> ﺮﺻﺎﻨﻋ ﺭﺩ ﺍﺭ <p> ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﺎﺜﻣ
div p {
background-color: yellow;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺪﻨﺘﺴﻫ a ﻥﺍﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ ﯼﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺪﻧﺯﺮﻓ ﺮﮕﺑﺎﺨﺘﻧﺍ
ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ <p> ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﺎﺜﻣ
div > p {
background-color: yellow;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<!-- not Child but Descendant -->
<p>Paragraph 3 in the div (inside a section element).</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html>
ﺪﺷﺎﺑ ﺎًﻤﯿﻘﺘﺴﻣ ﻪﮐ ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺮﺼﻨﻋ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ ﺭﻭﺎﺠﻣ ﺭﺩﺍﺮﺑ ﻭ ﺮﻫﺍﻮﺧ ﺮﮕﺑﺎﺨﺘﻧﺍ
ﯼﺎﻨﻌﻣ ﻪﺑ "ﺭﻭﺎﺠﻣ" ﻭ ،ﺪﻨﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺍﺭ ﺪﻟﺍﻭ ﺮﺼﻨﻋ ﻥﺎﻤﻫ ﺪﯾﺎﺑ ﺭﺩﺍﺮﺑ ﻭ ﺮﻫﺍﻮﺧ ﺮﺻﺎﻨﻋ
:ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ <div> ﺮﺻﺎﻨﻋ ﺯﺍ ﺪﻌﺑ ﻪﻠﺻﺎﻓﻼﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ <p> ﺮﺼﻨﻋ ﻦﯿﻟﻭﺍ ﺮﯾ
div + p {
background-color: yellow;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>
<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
</body>
</html>
.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺪﻨﺘﺴﻫ ﻩﺪﺷ ﺺﺨﺸﻣ ﺮﺼﻨﻋ ﮏﯾ ﯼﺪﻌﺑ ﺭﺩﺍﺮﺑ ﻭ ﺮﻫﺍﻮﺧ ﻪﮐ ﺍﺭ ﯼﺮﺻﺎﻨﻋ ﻪﻤﻫ ﯽﻣﻮﻤ
:ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺪﻨﺘﺴﻫ <div> ﺮﺻﺎﻨﻋ ﯼﺪﻌﺑ ﺭﺩﺍﺮﺑ ﻭ ﺮﻫﺍﻮﺧ ﻪﮐ ﺍﺭ <p> ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝ
div ~ p {
background-color: yellow;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
: ﻝﺎﺜﻣ
div p
:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ
ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ <div> ﺮﺻﺎﻨﻋ ﺭﺩ ﺍﺭ <p> ﺮﺻﺎﻨﻋ ﻪﻤﻫ
: ﻝﺎﺜﻣ
div > p
:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ
ﺖﺳﺍ <div> ﺮﺼﻨﻋ ﺪﻟﺍﻭ ﻥﺁ ﺭﺩ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ <p> ﺮﺻﺎﻨﻋ ﻪﻤﻫ
: ﻝﺎﺜﻣ
div + p
:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ
ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ <div> ﺮﺻﺎﻨﻋ ﺯﺍ ﺪﻌﺑ ﻪﻠﺻﺎﻓﻼﺑ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﻦﯿﻟﻭﺍ
: ﻝﺎﺜﻣ
p ~ ul
:ﻝﺎﺜﻣ ﺢﯿﺿﻮﺗ
ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ <p> ﺮﺼﻨﻋ ﮏﯾ ﺯﺍ ﻞﺒﻗ ﻪﮐ ﺍﺭ <ul> ﺮﺼﻨﻋ ﺮﻫ