در این قسمت از فیلم آموزش CSS ترکیب انتخابگرها آموزش داده شده :
در این قسمت از فیلم آموزش CSS با نحوه ترکیب انتخابگرها ( Selector ) آشنا خواهید شد که به شرح زیر هستند :
ترکیب ارثی ( Descendant ) در فیلم آموزش CSS :
در ترکیب ارثی شما مشخص می کنید مثلاً عنصر <P> که در داخل عنصر <div> قرار دارد چه استایل به خود بگیرد . به مثال زیر توجه کنید در این مثال عنصر <P> داخل div است . پس <P> می شود فرزند <div> و همین طور عنصر <div> ، پدر عنصر <P> است .
<div> <p> CSS آموزش </p> </div>
برای استایل دادن به <P> در CSS کافیست اسم پدر آن را بنویسیم و بعد یک فاصله ( space ) بزنیم و P را بنویسیم و بهش استایل بدیم :
div p{
width: 300px;
height: 300px;
color: green;
background-color: yellow;
}
توضیحات بیش تر در فیلم آموزش CSS داده شده است .
فرزند اصلی :
با استفاده از علامت < می توانیم به فرزندهای اصلی یک عنصر استایل مورد نظرمان را بدهیم . به مثال زیر توجه کنید :
div > p{
width: 300px;
height: 300px;
color: yellow;
background-color: blue;
}
فرزند اصلی یعنی این که داخل عنصر دیگری نباشد .
با این کار به همه عنصر های P که فرزند اصلی div هستند این استایل را می دهیم ، برای این که به یک عنصر خاصی این استایل را بدهیم کافیست که برای آن یک class تعریف کنیم مانند مثال زیر :
<div class="text"> <p> CSS آموزش </p> </div>
در CSS :
.text > p{
width: 300px;
height: 300px;
color: yellow;
background-color: blue;
}
اولین عنصر مجاور در CSS :
با استفاده از علامت + می توانیم به اولین عنصر مجاور استایل بدهیم . به مثال زیر دقت کنید :
در HTML :
<!Doctype html>
<head>
<title>Web30ty</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>
<p> CSS آموزش </p>
</div>
<p> HTML آموزش </p>
</body>
</html>
در این مثال یک عنصر <P> در داخل div قرار دارد و دیگری در بیرون از آن حال اگر بخواهیم به اولین تگ <P> بعد از div استایل بدهی در CSS به صورت زیر عمل می کنیم :
.text + p{
width: 300px;
height: 300px;
color: yellow;
background-color: blue;
}
با این کار به همه اولین عنصر های تگ P بعد از div این استایل داده می شود برای جلوگیری از این کار می توانید یک id یا class به عنصر مورد نظر خود بدهید مانند کد زیر :
<div id="text"> <p> CSS آموزش </p> </div> <p> HTML آموزش </p>
در CSS :
#text + p{
width: 300px;
height: 300px;
color: yellow;
background-color: blue;
}
عناصر عمومی مجاور در CSS :
با استفاده از علامت ~ می توان به همه عناصر مجاور استایل داد . در مثال زیر می توان به همه عناصر P بعد از div استایل داد :
div ~ p{
width: 300px;
height: 300px;
color: yellow;
background-color: blue;
}
توضیحات بیش تر در فیلم آموزش CSS گفته است .
شاید برای شما این سوال پیش بیاید که چرا از ترکیب انتخابگر ها استفاده می کنیم ؟؟؟
باید بگم برای این استفاده می کنیم که حجم کدها کم شود و اگر حجم کد های شما کمتر شود در سئو سایت خیلی تاثیر دارد و باعث کم شدن زمان لود می شود .
