எளிய தமிழில் CSS – 7 – Combinators

Combinator என்பது இரண்டு selector-க்கு இடையில் அமைக்கப்படும் ஒரு உறவு ஆகும். <div> எவ்வாறு அமைக்கப்பட வேண்டும், <p> எவ்வாறு அமைக்கப்பட வேண்டும் என்பதெல்லாம் selectors. இவை இரண்டையும் இணைத்து ஏதேனும் ஒன்று சொல்லப்படுமாயின் அது combinator ஆகும்.

div p { —– } : இவ்வாறு div, p எனும் இரண்டு selector-க்கும் இடையில் இடைவெளி விட்டு style-ஐக் குறிப்பிட்டோமானால், அந்த style-ஆனது divக்குள் இருக்கும் p-க்கு மட்டுமே பொருந்தும்.


<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>

div ~ p { —– } : div, p எனும் இரண்டு selector-க்கும் இடையில் ~ இருந்தால் div-க்கு வெளியே இருக்கும் p-க்கு மட்டுமே கொடுக்கப்படும் style பொருந்தும்.


<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>

div + p { —– } : div, p எனும் இரண்டு selector-க்கும் இடையில் + காணப்படின் div-ஐத் தொடர்ந்து உடனடியாக வரும் p-க்கு மட்டுமே கொடுக்கப்படும் style பொருந்தும்.


<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>

div > p { —– } : div, p எனும் இரண்டு selector-க்கும் இடையில் > இருந்தால் divக்குள் இருக்கும் p-க்கு மட்டுமே style பொருந்தும். ஆனாலும் அந்த p-ஆனது வேறு ஏதேனும் ஒரு tag-க்குள் சிக்கிக்கொண்டால் அவற்றுக்கு style பொருந்தாது.


<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>

 

து. நித்யா

nithyadurai87@gmail.com

தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/

Leave a Reply

%d bloggers like this: