Combinator என்பது இரண்டு selector-க்கு இடையில் அமைக்கப்படும் ஒரு உறவு ஆகும். <div> எவ்வாறு அமைக்கப்பட வேண்டும், <p> எவ்வாறு அமைக்கப்பட வேண்டும் என்பதெல்லாம் selectors. இவை இரண்டையும் இணைத்து ஏதேனும் ஒன்று சொல்லப்படுமாயின் அது combinator ஆகும்.
div p { —– } : இவ்வாறு div, p எனும் இரண்டு selector-க்கும் இடையில் இடைவெளி விட்டு style-ஐக் குறிப்பிட்டோமானால், அந்த style-ஆனது divக்குள் இருக்கும் p-க்கு மட்டுமே பொருந்தும்.
[code]
<html>
<head>
<style>
div p {background-color:skyblue;}
</style>
</head>
<body>
<div>
<p> Dont Giveup! Keep on Trying! </p>
<b><p>Even though it seems to be impossible, It will happen in your life one day. </p></b>
</div>
<p>All the very best friends!</p>
<p> Wait to see the miracle in your life!!!!!! </p>
</body>
</html>
[/code]
div ~ p { —– } : div, p எனும் இரண்டு selector-க்கும் இடையில் ~ இருந்தால் div-க்கு வெளியே இருக்கும் p-க்கு மட்டுமே கொடுக்கப்படும் style பொருந்தும்.
[code]
<html>
<head>
<style>
div ~ p {background-color:skyblue;}
</style>
</head>
<body>
<div>
<p> Dont Giveup! Keep on Trying! </p>
<b><p>Even though it seems to be impossible, It will happen in your life one day. </p><b>
</div>
<p>All the very best friends!</p>
<p> Wait to see the miracle in your life!!!!!! </p>
</body>
</html>
[/code]
div + p { —– } : div, p எனும் இரண்டு selector-க்கும் இடையில் + காணப்படின் div-ஐத் தொடர்ந்து உடனடியாக வரும் p-க்கு மட்டுமே கொடுக்கப்படும் style பொருந்தும்.
[code]
<html>
<head>
<style>
div + p {background-color:skyblue;}
</style>
</head>
<body>
<div>
<p> Dont Giveup! Keep on Trying! </p>
<b><p>Even though it seems to be impossible, It will happen in your life one day. </p></b>
</div>
<p>All the very best friends!</p>
<p> Wait to see the miracle in your life!!!!!! </p>
</body>
</html>
[/code]
div > p { —– } : div, p எனும் இரண்டு selector-க்கும் இடையில் > இருந்தால் divக்குள் இருக்கும் p-க்கு மட்டுமே style பொருந்தும். ஆனாலும் அந்த p-ஆனது வேறு ஏதேனும் ஒரு tag-க்குள் சிக்கிக்கொண்டால் அவற்றுக்கு style பொருந்தாது.
[code]
<html>
<head>
<style>
div > p {background-color:skyblue;}
</style>
</head>
<body>
<div>
<p> Dont Giveup! Keep on Trying! </p>
<b><p>Even though it seems to be impossible, It will happen in your life one day. </p></b>
</div>
<p>All the very best friends!</p>
<p> Wait to see the miracle in your life!!!!!! </p>
</body>
</html>
[/code]
து. நித்யா
தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/