گروه مقاله : CSS
تاريخ انتشار : 1394/02/03 - 10:47
كد :237
ترکیب در واقع ارتباط بین selector ها را بیان می کند. یک selector یا انتخابگر css می تواند بیش از یک انتخابگر ساده داشته باشد. ما می توانیم بین selector های ساده ارتباط ایجاد کنیم.
ترکیب در واقع ارتباط بین selector ها را بیان می کند. یک selector یا انتخابگر css می تواند بیش از یک انتخابگر ساده داشته باشد. ما می توانیم بین selector های ساده ارتباط ایجاد کنیم.
چهار حالت ترکیب مختلف در CSS3 وجود دارد، که طبق ساختار والد و فرزند به شرح زیر می باشند :
-
Descendant selector
-
Child selector
-
Adjacent sibling selector
-
General sibling selector
» برای اینکه راحت تر متوجه شوید، توصیه می کنیم حتما به مثال ها توجه نمایید.
Descendant selectors :
در این حالت تمامی انتخابگرهای مورد نظر توسط والد خود style می گیرند. در مثال زیر تمامی تگ های <p> که داخل div هستند رنگ پس زمینه شان زرد خواهد بود.
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
child selector :
در این حالت تنها فرزندان از والد خود پیروی می کنند نه فرزند فرزندان. در مثال زیر تمام تگ های <p> بجز تگ <p> که داخل تگ <span> قرار دارد (فرزند ِ فرزند) دارای پس زمینه زرد رنگ می باشد.
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
adjacent sibling selector :
در این حالت فرزندان والد style نمی پذیرند بلکه اولین فرزندی که در مجاورت والد و خارج از آن قرار دارند style می پذیرند.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>
general sibling :
در این حالت نیز فرزندان والد style نمی پذیرند بلکه تمام فرزندانی که در مجاورت والد و خارج از آن قرار دارند style می پذیرند.
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>