تخفیف ویژه زمستانه پی استور
تا 60 درصد تخفیف
شامل پروژه‌ها و دوره‌های آموزشی
روز
ساعت
دقیقه
ثانیه
تخفیف ویژه زمستانه پی استور
سلکتورهای ابتدایی که در پست قبلی به آن‌ها اشاره کردیم رایج‌ترین سلکتورهای موجود هستند و بیشترین استفاده را دارند. در ادامه پست انواع سلکتورها با ما همراه باشید تا به معرفی و بررسی هرکدام از سلکتورها بپردازیم.
سلکتور یا انتخاب کننده جزئی از سینتکس CSS می‌باشد. همانطور که از نامش پیداست وظیفه انتخاب را دارد. زمانی که شما بخواهید به یک بخشی از HTML تغییراتی اعمال کنید ابتدا باید آن بخش را صدا بزنید و سپس تغییرات خود را با نوشتن کدهای CSS اعمال کنید.
برای مطالعه بیشتر در حوزه CSS از فایل آماده موجود بهره بگیرید.
در پست قبلی درمورد سلکتورهای آیدی و کلاس صحبت کردیم و با مفهوم آیدی و کلاس آشنا شدیم. این دو سلکتور بسیار رایج هستند اما بهتر است یک بار دیگر و از ابتدا درمورد انواع سلکتورها صحبت کنیم. به طور کلی سلکتورها به دو بخش سلکتورهای ساده و پیشرفته تقسیم شده‌اند که سلکتورهای ساده بیشترین استفاده را در بین طراحان وب دارد. همچنین خود سلکتورهای پیشرفته به چهار دسته تقسیم شده‌اند.
ما در این پست با تمامی سلکتورهای موجود در CSS آشنا خواهیم شد و به طور کامل درباره‌اشان توضیح خواهیم داد.
این سلکتور که سلکتور سراسری نیز نامیده میشود می‌تواند تمامی عنصرهای موجود در یک صفحه وب را انتخاب کند. این سلکتور حتی زیرشاخه‌های دیگر عناصر را نیز انتخاب می‌کند.
برای انتخاب تمامی عناصر موجود در یک صفحه وب به صورت زیر عمل می‌کنیم :
* {
css declarations;
}
برای استفاده از این نوع سلکتور ابتدا باید در HTML برای عنصر مورد نظر خود آیدی تعریف کنید و سپس در CSS آن را انتخاب کنید. همانطور که می‌دانید آیدی باید یکتا باشد و تنها برای یک آیدی خاص می‌توانید استایل تعریف کنید. هرچند می‌توانید چندین آیدی را به صورت ترکیبی انتخاب کنید و اختلالی نیز رخ نخواهد داد اما از لحاظ استاندارد کدنویسی معتبر نمی‌باشد.
سینتکس این سلکتور به شکل زیر می‌باشد :
#id {
css declarations;
}
برای مثال اگر بخواهیم برای یک عنصر که دارای آیدی first می‌باشد استایل دهی کنیم به‌صورت زیر عمل می‌کنیم :
#first {
background-color: yellow;
}
این سلکتور نیز همانند آیدی یک نوع سلکتور خاص است که می‌توان کلاس‌های مختلف را که از قبل در HTML تعریف شده است در CSS انتخاب کرد. سلکتور کلاس برخلاف آیدی می‌تواند یکتا نباشد و برای چندین عنصر امکان تعریف یک کلاس مشترک وجود دارد.
سینتکس این سلکتور به شکل زیر می‌باشد :
.class {
css declarations;
}
برای مثال اگر بخواهیم تگ هایی که دارای کلاس demo می‌باشند را انتخاب کنیم به صورت زیر عمل می‌کنیم :
.demo {
color: blue;
}
}
این سلکتور تگ و یا عنصر دلخواه را انتخاب می‌کند. این نوع از سلکتورها نیز از رایج ترین سلکتورها هستند و طراحان وب از آن بیشتر استفاده می‌کنند.
این نوع سلکتور زمانی مورد استفاده قرار می‌گیرد که بخواهید تمامی یک نوع از عنصر را انتخاب کنید. از طرفی در این نوع سلکتور شما نمی‌توانید انتخاب کنید کدام یک از عنصر ها به تنهایی انتخاب شوند. به طوری که تنها با استایل دهی بر روی یک عنصر، بر روی تمامی عنصرهای مشابه دیگر نیز اعمال خواهد شد.
سینتکس این سلکتور به شکل زیر می‌باشد :
element {
css declarations;
}
برای مثال اگر بخواهیم تمامی <p> های موجود در HTML را انتخاب کنیم به صورت زیر عمل می‌کنیم :
p {
background-color: yellow;
}
اگر تا به اینجا سلکتورها را خوب یاد گرفتید، تبریک میگم! چون یادگیری این سلکتورها برای هر طراح وبی ضروری می‌باشد. اما توجه داشته باشید که در CSS سلکتورهای پیشرفته‌تری نیز وجود دارند که یادگیری آن‌ها خالی از لطف نیست.
سلکتورهای پیشرفته در CSS به چهار دسته تقسیم می‌شوند :
در ادامه پست سلکتورها در CSS با ما همراه شوید تا با این سلکتورهای پیشرفته همراه با مثال آشنا شویم.
همچنین برای کسب آگاهی بیشتر در رابطه با زبان‌های مختلف نشانه‌گذاری، از فایل آماده موجود در این زمینه دیدن کنید.
در لغت Combinator به معنای ترکیب کننده می‌باشد. در این نوع از سلکتورها کلاس‌ها، آیدی و عنصرها را با هم ترکیب کرده و یک سلکتور متفاوت خلق می‌کنیم. سلکتورهای ترکیبی به پنج دسته تقسیم می‌شوند :
در ادامه پست به توضیح و بررسی هر کدام از این سلکتورها همراه با ارائه یک نمونه مثال می‌پردازیم.
همانطور که از نام این سلکتور پیداست، از این سلکتور زمانی استفاده میشود که بخواهیم به صورت ترکیبی و به چندین کلاس یا عنصر استایل دهی مشترک کنیم.
استفاده از این نوع سلکتور موجب کمتر شدن تعداد کدها نیز میشود. زیرا دیگر نیاز نیست برای هر کدام از کلاس‌ها یا عنصرها به صورت جداگانه استایل بنویسیم. در این روش کلاس‌ها و عنصرها با کاراکتر کاما (,) از یکدیگر جدا می‌شوند. همچنین در این سلکتور هرچندتا که بخواهید می‌توانید کلاس و عنصر انتخاب کنید.
سینتکس این سلکتور به شکل زیر می‌باشد :
element, class {
css declarations;
}
برای مثال اگر بخواهیم برای <p> و <h1> و کلاس demo یک ویژگی مشترک اعمال کنیم به صورت زیر عمل می‌کنیم :
p, h1, .demo {
background-color: yellow;
}
این سلکتور که بیشتر به‌صورت پدر و فرزندی شناخته میشود تنها به عنصرهایی استایل می‌دهد که نواده عنصر انتخاب شده باشند. بدین صورت که تنها با یک فاصله (Space) رابطه پدر فرزندی را تعریف می‌کنیم. در این نوع سلکتور تمامی زیرشاخه‌های عنصر پدر بدون استثناء انتخاب می‌شوند.
سینتکس این سلکتور به شکل زیر می‌باشد :
element element {
css declarations;
}
برای مثال اگر چندین <p> داشته باشیم اما تنها بخواهیم به آن <p> را که داخل <div> می‌باشد استایل دهی کنیم از این روش و به صورت زیر استفاده می‌کنیم :
کدهای HTML :
<div> <p>I'm the first</p> <p>I'm second</p> </div> <p>I'm third</p>
CSS :
div p {
color: red;
}
در این مثال تنها به پاراگراف اول و دوم استایل اعمال خواهد شد.
این سلکتور همانند سلکتور بالا عمل می‌کند اما تفاوتی که وجود دارد در این است که این سلکتور تنها بر روی عناصری که مستقیماً فرزند والد انتخاب شده هستند استایل دهی می‌کند.
سینتکس این سلکتور به شکل زیر می‌باشد :
element > element {
css declarations;
}
برای مثال در تکه کد زیر استایل بر روی آن <p> که مستقیماً فرزند <div> نمی‌باشد اعمال نخواهد شد.
کدهای HTML :
<div> <h2>My name is Fatemeh</h2> <p>I live in Iran</p> </div> <div> <span><p>I will not be styled</p></span> </div>
CSS :
div > p {
background-color: #b0f5b0;
}
در لغت Sibling به معنای خواهر یا برادر است؛ و از طرفی Adjacent به معنای مجاور می‌باشد. این نوع سلکتور تنها عنصرهای همجوار عنصر انتخاب شده را انتخاب کرده و استایل دهی می‌کند.
سینتکس این سلکتور به شکل زیر می‌باشد :
element + element {
css declarations;
}
برای مثال اگر بخواهیم تنها <p> بعد از <h1> را انتخاب کنیم بدین صورت عمل می‌کنیم :
کدهای HTML :
<h1>Hello world</h1> <p>I will be styled</p> <p>I will not be styled</p>
CSS :
h1 + p {
background-color: pink;
}
این سلکتور نیز همانند سلکتور بالا عمل می‌کند با این تفاوت که دیگر فقط عنصر مجاور انتخاب نمی‌شود. بلکه تمامی عنصرهایی که پس از عنصر انتخاب شده وجود دارند را انتخاب کرده و استایل دهی می‌کند.
سینتکس این سلکتور به شکل زیر می‌باشد :
element ~ element {
css declarations;
}
برای مثال اگر بخواهیم تمامی <h3> هایی که پس از <p> وجود دارند انتخاب کنیم به صورت زیر عمل می‌کنیم :
کدهای HTML :
<p>I will not be styled</p> <h3>My color is red</h3> <div>I will not be styled</div> <h3>My color is red</h3>
CSS :
p ~ h3 {
background: red;
}
سلکتورها در CSS انواع مختلفی دارند که کاربردهای فراوانی دارند. یکی از این سلکتورها که به چندین صورت می‌توان از آن استفاده کرد سلکتور Attribute می‌باشد.
سینتکس این سلکتور به شکل زیر می‌باشد :
[attribute] {
css declarations;
}
این نوع سلکتورها بسیار پیشرفته و پرکاربرد می‌باشند و می‌توانیم بر اساس صفت عنصرها، آن‌ها را استایل دهی کنیم. این نوع از استایل دهی به شش دسته تقسیم میشود :
این نوع سلکتور زمانی به کار می‌آید که بخواهیم یک عنصر دارای یک صفت خاص را انتخاب کنیم. برای مثال، برای انتخاب تمامی لینک های موجود در صفحه وب که دارای صفت target باشند به صورت زیر عمل می‌کنیم :
a[target] {
color: brown;
}
حال اگر بخواهیم لینک هایی را که صفت target شان برابر با blank_ باشد انتخاب کنیم باید به صورت زیر عمل کنیم :
a[target=_blank] {
color: purple;
}
از این سلکتور زمانی استفاده میشود که بخواهیم عنصری را که صفتش حاوی یک مقدار مشخص است انتخاب کنیم. توجه کنید که این مقدار مشخص باید به تنهایی و یا درکنار مقادیر دیگری که با فاصله از هم جدا شده‌اند وجود داشته باشد.
حتی در صورتی که مقدار انتخاب شده پس از چندین مقدار که با فاصله از هم جدا شده‌اند بیاید نیز می‌توان انتخاب و استایل دهی کرد.
کدهای HTML :
<select name="xx cars yy"> <option>Volvo</option> <option>Saab</option> <option>Opel</option> <option>Audi</option> </select>
CSS :
[name~=cars] {
font-size: 24px;
}
از این سلکتور نیز زمانی استفاده میشود که بخواهیم عنصری را که صفتش حاوی یک مقدار مشخص است انتخاب کنیم. در این سلکتور تنها عنصرهایی انتخاب می‌شوند که صفت آن با مقدار انتخابی شروع شده و همچنین مقادیر با کاراکتر خط تیره (-) از هم جدا شده باشند. برای مثال اگر بخواهیم یک combo box با صفت name که دارای مقدار cars است انتخاب کنیم و از طرفی یک پاراگراف داشته باشیم که با -cars شروع شده است، امکان انتخاب هر دوی عنصرها با این روش وجود دارد.
کدهای HTML :
<select name="cars"> <option>Volvo</option> <option>Saab</option> <option>Opel</option> <option>Audi</option> </select> <p name="cars-p">Hello World!</p>
CSS :
[name|=cars] {
font-size: 24px;
color: red;
}
این سلکتور نیز همانند روش بالا عمل می‌کند با این تفاوت که تنها کافیست صفت عنصر با مقدار انتخابی شروع شود. به مثال زیر توجه کنید. در تکه کد زیر تمامی عنصرها انتخاب شده و استایل دهی می‌شوند :
کدهای HTML :
<div class="test aa">11111111</div> <div class="testttttt">22222222</div> <div class="test-x">33333333</div> <div class="test_y">44444444</div>
CSS :
div[class^="test"] {
background: brown;
color: white;
}
این سلکتور دقیقا برعکس سلکتور بالا عمل می‌کند. در این سلکتور تنها کافیست صفت عنصر به جای شروع، با مقدار انتخاب شده به پایان برسد. به زبان ساده صفاتی انتخاب می‌شوند که با مقدار انتخابی تمام شده باشند. برای درک بهتر به مثال زیر توجه کنید. در تکه کد زیر تمامی عنصرها انتخاب شده و استایل دهی می‌شوند :
کدهای HTML :
<div class="test">11111111</div> <div class="xxx test">22222222</div> <div class="x-test">33333333</div> <div class="y_test">44444444</div>
CSS :
div[class$="test"] {
background: blue;
color: yellow;
}
این سلکتور نیز ترکیبی از سلکتورهای بالا می‌باشد. تنها کافی است یک مقدار مشخصی را انتخاب کنید تا سلکتور جستجو کند و هرکدام از عنصرها که دارای صفتی با مقدار مشخص شده باشد انتخاب کرده و استایل دهی کند. در این سلکتور مهم نیست که مقدار صفت با چه حروف یا کاراکترهایی شروع یا تمام شود. در هر صورت اگر مقدار صفت دارای مقدار مشخص شده باشد انتخاب خواهد شد.
کدهای HTML :
<div class="test">11111111</div> <div class="xxx test">22222222</div> <div class="xxxtest yyy">33333333</div> <div class="test-x">44444444</div>
CSS :
div[class*="test"] {
background: purple;
color: white;
}
این سلکتورها به شبه کلاس معروف هستند. حالا چرا شبه کلاس؟ اگر خاطرتان باشد گفتیم که کلاس‌ها ابتدا در HTML تعریف می‌شوند و سپس در CSS انتخاب و استایل دهی می‌شوند. حالا شبه کلاس‌ها همانند این کلاس‌های معمولی عمل می‌کنند با این تفاوت که دیگر در HTML تعریف نمی‌شوند.
سینتکس این سلکتور به شکل زیر می‌باشد :
selector:pseudo-class {
property: value;
}
در این نوع سلکتور می‌توان یک عنصر یا کلاس را با شبه کلاس ترکیب کرد. همانطور که در سینتکس این سلکتور می‌بینید شبه کلاس باید با دو نقطه (:) از هم جدا شوند. شبه کلاس‌ها از پیش تعریف شده اند و با خصوصیات عناصر ارتباط مستقیم دارند.
برای مثال نمی‌توان شبه کلاس مربوط به بازدید یک لینک را برای پاراگراف استفاده کرد. زیرا پاراگراف تنها یک متن است و لینک نیست! و یا نمی‌توان شبه کلاس مربوط به فوکوس یک کادر متنی را بر روی تصویر یا پاراگراف استفاده کرد.
به طور کلی با توجه به خصوصیات هر عنصر می‌توان برخی از این شبه کلاس‌ها را استفاده کنیم و به وسیله آن به عنصرهای خود استایل دهیم.
نکته : نام شبه کلاس‌ها به حروف بزرگ و کوچک حساس نیستند.
این شبه کلاس‌ها بیشتر برای لینک‌ها مورد استفاده قرار می‌گیرند اما برخی از آن‌ها را می‌توان برای دیگر عناصر نیز استفاده نمود. این شبه کلاس‌ها به چهار دسته تقسیم می‌شوند :
مثال برای شبه کلاس لینک، کد HTML :
<h1><a href="#">This is a link</a></h1>
CSS :
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: cyan;
}
/* selected link */
a:active {
color: blue;
}
نکته : توجه کنید که ترتیب استفاده از این شبه کلاس‌ها مهم است. a:hover باید پس از a:link استفاده شود و a:active باید پس از a:hover استفاده شود. در صورتی که بخواهید از a:visited استفاده کنید باید بین a:link و a:hover قرار گرفته باشد.
این شبه کلاس‌ها برای عنصر <input> مورد استفاده قرار می‌گیرند. همانطور که می‌دانید input یک تگ ورودی می‌باشد ومی‌تواند ورودی‌هایی مثل button و text و checkbox و radio ایجاد کند.
شبه کلاس‌هایی که برای تگ input وجود دارند به صورت زیر می‌باشند :
کدهای HTML :
<input type="radio" checked="checked" value="male" name="gender"> Male<br> <input type="radio" value="female" name="gender"> Female<br> <input type="checkbox" checked="checked" value="Bike"> I have a bike<br> <input type="checkbox" value="Car"> I have a car<br> <select> <option>Volvo</option> <option>Saab</option> <option>Opel</option> <option>Audi</option> </select>
CSS :
input:checked {
height: 20px;
width: 20px;
}
option:checked {
width: 100px;
}
کدهای HTML :
<div> First name: <input type="text" value="Fatemeh"><br> Last name: <input type="text" value="Esmaeili"><br> Country: <input type="text" disabled="disabled" value="Iran"> </div>
CSS :
input[type=text]:enabled {
background: pink;
}
input[type=text]:disabled {
background: red;
}
کدهای HTML :
<div> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </div>
CSS :
input:focus {
background-color: hotpink;
border: dashed 2px;
color: white;
}
کدهای HTML :
<div> Enter an email : <input type="email"> </div>
CSS :
input:valid {
background-color: purple;
color: white;
}
input:invalid {
border: 2px solid red;
color: red;
}
کدهای HTML :
<p>An optional input element: <input></p> <p>A required input element: <input required></p>
CSS :
input:optional {
background-color: green;
color: white;
}
input:required {
background-color: red;
color: white;
}
کدهای HTML :
<p>A normal input element: <input value="hello"></p> <p>A readonly input element: <input readonly value="hello"></p>
CSS :
input:read-write {
background-color: cyan;
}
input:read-only {
background-color: yellow;
}
این شبه کلاس‌ها برای عنصر <p> مورد استفاده قرار می‌گیرند. همانطور که در پست آموزش تگ P ذکر کرده‌ایم این تگ برای ایجاد پاراگراف مورد استفاده قرار می‌گیرد. شبه کلاس‌هایی که برای سلکت تگ p وجود دارند در بین طراحان وب بسیار پرطرفدار هستند و بسیار مورد استفاده قرار می‌گیرند. در ادامه پست به توضیح برخی از این شبه کلاس‌های پرکاربرد اشاره می‌کنیم.
کدهای HTML :
<ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> <ol> <li>First</li> <li>Second</li> <li>Third</li> </ol>
CSS :
li:first-child {
background: yellow;
}
li:last-child {
background: cyan;
}
کدهای HTML :
<p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p>
CSS :
p:nth-child(1) {
background: purple;
color: white;
font-size: 24px;
}
کدهای HTML :
<h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <a href="https://programstore.ir" target="_blank">Link to Pstore!</a>
CSS :
p {
color: #000000;
}
:not(p) {
color: #ff0000;
}
کدهای HTML :
<p><a href="#news1">Jump to New content 1</a></p> <p><a href="#news2">Jump to New content 2</a></p> <h1>Click ^ to Jump</h1> <p id="news1"><b>New content 1...</b></p> <p id="news2"><b>New content 2...</b></p>
CSS :
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
شبه عنصرها سکلتورهایی هستند که دقیقا همانند شبه کلاس‌ها از پیش تعریف شده‌اند و برای انتخاب یک بخش خاص از یک عنصر و استایل دهی به آن مورد استفاده قرار می‌گیرد. تفاوتی این سلکتور با شبه کلاس‌ها دارد در این است که شبه کلاس ممکن است هم برای عنصر و هم کلاس مورد استفاده قرار بگیرد اما شبه عنصرها تنها در انتخاب عنصرها به کار می‌آید.
سینتکس این سلکتور به شکل زیر می‌باشد :
selector::pseudo-Element {
property: value;
}
شبه عنصرها دقیقا مانند شبه کلاس‌ها با کاراکتر (:) از هم جدا می‌شدند اما در CSS3 به کاراکتر (::) تغییر پیدا کرد تا شبه عنصرها از شبه کلاس‌ها جدا شوند. به طور کلی شبه عنصرها به چهار دسته تقسیم می‌شوند :
کدهای HTML :
<p> My name is Fatemeh </p> <p> I live in Iran </p>
CSS :
p::after {
content: " - Remember this";
background-color: yellow;
color: red;
font-weight: bold;
}
p::before {
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
font ،color ،background ،margin ،padding ،border text-decoration ،vertical-align ،text-transform ،line-height ،float ،clear
برای مثال به تکه کد زیر توجه کنید :
کدهای HTML :
<p>My name is Fatemeh.</p> <p>My last name is Esmaeili.</p> <p>I live in Iran.</p>
CSS :
p::first-letter {
font-size: 40px;
color: hotpink;
}
کدهای HTML :
<p>Hello World</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
CSS :
p::first-line {
font-size: 24px;
color: green;
}
کدهای HTML :
<p>This is a paragraph.</p> <div>This is some text in a div element.</div>
CSS :
::selection {
color: white;
background: darkgreen;
}
این پست هم از مجموعه آموزش‌های پی‌استور به پایان رسید. در این پست سعی کردیم به صورت جامع و کامل به بررسی سلکتورها در CSS بپردازیم و ببا آن‌ها آشنا شویم. با مثال‌هایی که برای هر سلکتور زدیم می‌توانید تمرین کنید و با چگونگی کار کردن با آن‌ها آشنا شوید. همین حالا یک ویرایشگر متنی باز کنید و از ابتدا شروع به نوشتن هرکدام از این کدها کنید.
مطمئناً پس از آن که خودتان به صورت عملی کدها را بنویسید می‌توانید به راحتی این سلکتورها را درک کنید و پس از این می‌توانید به خاطر بسپارید که هرکدام از سلکتورها را در چه موقعی استفاده کنید. موفق باشید. منتظر نظرات و پیشنهادات شما هستیم.
