JahanSoft
June 7th, 2017, 23:47
1 - Selector *
* {
margin: 0;
padding: 0;
}
ابتدا یک سلکتور ساده را معرفی میکنیم، سلکتور ستاره تمام المنت های درون صفحه را انتخاب میکند، خیلی از طراحان وب از این سلکتور استفاده میکنند تا به تمام المنت های صفحه margin و padding صفر بدهند، سلکتور ستاره همچنین میتواند در سلکتورهای دیگر به کار برود :
#container * {
border: 1px solid black;
}
در این کد هر المنتی که فرزند container باشد را انتخاب میکند.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/star.html)2 - X Selector#
#container {
width: 960px;
margin: auto;
}
اضافه کردن علامت hash یا # در اول هر سلکتور باعث میشود از طریق ID آن سلکتور را انتخاب کنیم، از این طریق سلکت های زیادی در صفحه انجام میدهیم، اما هنگامی که از IE استفاده میکنید حواس خود را نسبت به مشکلاتی که ممکن است ایجاد شود جمع کنید، همچنین در مقاله ای که قبلا در مجیدآنلاین منتشر شد ویژگی های CSS (http://www.majidonline.com/article/%D9%88%DB%8C%DA%98%DA%AF%D9%87%D8%A7%DB%8C_CSS_%DB %8C%D8%A7_CSS_Specificity_%D8%B1%D8%A7_%DB%8C%D8%A 7%D8%AF_%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF.html) را بررسی کردیم که میتوانید در آنجا تفاوت بین ID و سایر سلکتورها را یاد بگیرید. باید به خاطر داشته باشید که 2 بار نمیتوانید از IDD استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های HTML5 برای سلکت کردن استفاده کنید و یا از کلاس های pseudo استفاده کنید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/id.html)3. X Selector.
.error {
color: red;
}
این یک سلکتور Class است، فرق سلکتورهای ID و Class این است که هنگامی که توسط Class سلکت انجام میدهید میتوانید چندین و چندبار سلکت انجام دهید اما هنگام استفاده از ID نمیتوانید، هنگامی از Class استفاده کنید که میخواهید استایل خود را به گروهی از المنت ها بدهید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/class.html)4. X Y Selector
li a {
text-decoration: none;
}
یکی دیگر از سلکتورهای پرطرفدار دیگر این سلکتور است، زمانی میخواهید سلکت های خود را دقیق تر کنید باید از این روش استفاده کنید، برای مثال، اگر میخواهید تمام تگ های a که دارای یک لیست نامرتب هستند را سلکت کنید میتوانید از کد بالا استفاده کنید.
نکته ی مهم : اگر سلکتور شما به صورت X Y Z A B .error در آمد دچار مشکل میشوید، همیشه زمانی که میخواهید این همه سلکتور پشت هم بگذارید حتما از خود بپرسید که آیا همچین کاری واقعا ضروری است یا نه ؟ اگر ضروری نیست این کار را انجام ندهید.
پشتیبانی مرورگرها
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/descend.html)5. X Selector
a { color: red; }
ul { margin-left: 0; }
اگر بخواهید همه ی تگ های یک نوع المنت را سلکت کنید چه کار میکنید ؟ اگر بخواهید همه ی تگ ها بر اساس نوع آنها و نه بر اساس id و class سلکت کنید چه کار میکنید ؟ باید از روش بالا استفاده کنید، اگر میخواهید تمام تگ های a را سلکت کنید از خط اول مثال بالا و اگر میخواهید تمام تگ های ul را سلکت کنید از خط دوم استفاده کنید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/tagName.html)6. X:visited و X:link
a:link { color: red; }
a:visted { color: purple; }
از x:link برای زمانی که میخواهید تمام تگ های a که قابلیت کلیک شدن دارند را سلکت کنید استفاده کنید، همچنین از x:visited برای زمانی که میخواهید تمام تگ های a که دیده شده اند یا کلیک شده اند را سلکت کنید استفاده کنید.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/links.html)7. X + Y Selector
ul + p {
color: red;
}
برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید، برای مثال در اینجا اولین تگ p که دقیقا پس از هر تگ ul قرار دارد قرمز رنگ میشود میشود.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/adjacent.html)8. X > Y Selector
div#container > ul {
border: 1px solid black;
}
تفاوت بین حالت X Y و X > Y این است که دومی تنها فرزندان مستقیم را انتخاب میکند، برای مثال، با توجه به قطعه کد زیر :
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
یک سلکتور #container>ul تمام ul هایی را انتخاب میکند که فرزند مستقیم تگ div با ID برابر با container هستند، برای مثالul هایی فرزند تگ li هستند را انتخاب نمیکند، این روش هنگامی که میخواهید از سلکتورهای CSS در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.
پشتیبانی مرورگر ها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/childcombinator.html)9. X ~ Y Selector
ul ~ p {
color: red;
}
این سلکتور همانند سلکتور X+Y است، در سلکتور X+Y تنها اولین المنتی که پس از سلکتور پیشین میومد انتخاب میشد اما در اینجا، هرتگ p که در هرجای کد فرزند تگ ul است را انتخاب میکند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/generalcombinator.html)10. X[title] Selector
a[title] {
color: green;
}
در این مثال، تگ های a را انتخاب میکند که صفت title دارند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes.html)11. X[href="foo"] Selector
a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
قطعه کد بالا تمام تگ های a را انتخاب میکند که به http://net.tutsplus.com لینک میشوند و رنگ سبز میگیرند و بقیه تگ های a بی تاثیر می مانند، همچنین برای اضافه کردن ویژگی های بیشتر میتواند از عبارات باقاعده استفاده کنید.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes2.html)12. X[href*="nettuts"] Selector
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
حرف * به این معنی است که value ما یعنی کلمه ی tuts ممکن است در هر جایی ظاهر شود، بنابراین تمام حالت ها مانند nettuts.com یا tutsplus.com و ... انتخاب میشوند، حالا برای یک سایتی که عضو evanto نیست اما در رشته ی url خود کلمه ی tuts دارد چه اتفاقی می افتد ؟ در این صورت باید از ^ و $ استفاده کنیم.
پشتیبانی مرورگر ها:
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes3.html)13. X[href^="http"] Selector
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
تا حالا دقت کرده اید که خیلی از سایت ها چگونه یک آیکون را دقیقا بعد از یک لینک نمایش میدهند ؟ این یک کار ساده است، این کار به راحتی توسط عبارات باقاعده قابل انجام بر روی یک رشته متنی است، اگر بخواهیم تمام تگ های a که با http شروع میشوند را انتخاب کنیم، از یک سلکتور مانند بالا استفاده میکنیم.
حالا اگر بخواهیم بجای اینکه تمام لینک ها را انتخاب کنیم، تنها لینک هایی را انتخاب کنیم که دارای یک تگ a هستند ؟ این کار را میتوانیم با جست و جوی رشته ی متنی url انجام دهیم.
پشتیبانی مرورگر :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes4.html)14. X[href$=".jpg"] Selector
a[href$=".jpg"] {
color: red;
}
با استفاده از $ در عبارات با قاعده میتوانید انتهای یک رشته متنی را بدست آورید، در این مثال میخواهیم تمام تگ هایی را انتخاب کنیم که به یک img لینک میشوند یا حداقل یک url که انتهای آن .jpg دارد، دقت کنید که قطعه کد بالا برای عکس های gif یا png کار نمیکند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes5.html)15. X[data-*="foo"] Selector
a[data-filetype="image"] {
color: red;
}
به شماره هشت برگردید، اگر بخواهیم تمام نوع های عکس مانند png و jpeg و jpg و gif را انتخاب کنیم چه کار میکنیم ؟ میتوانیم سلکتورهای چندگانه بنویسیم برای مثال :
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
اما این کار سخت و غیربهینه است، کار دیگر این است که صفت data-filetype اضافه کنیم به تمام تگ های a که به یک عکس متصل میشوند.
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
به این صورت به سادگی، میتوانیم کار خود را به پایان برسانیم :
a[data-filetype="image"] {
color: red;
}
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes6.html)16. X[foo~="bar"] Selector
X[foo~="bar"]a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
این سلکتور یک سلکتور خیلی مفید و کاربردی است، تعداد کمی از انسان ها همچین حقه هایی را میدانند، سیمبل ~ میتواند به ما کمک کند یک صفتی را انتخاب کنیم که در آن فاصله ی از هم جدا داریم، بر اساس مثالی که در شماره 15 داشتیم، میتوانیم یک صفت data-info بسازیم و آن هر چیزی که نیاز داریم توسط فاصله کنارهم قرار دهیم، در این مثال تمام لینک ها و لینک هایی که به عکس متصل هستند را در نظر میگیریم :
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
حالا با استفاده از صفت ~ میتوانیم هر تگ لینکی که دارای آن value ها است را انتخاب کنیم :
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes7.html)17. X:checked Selector
input[type=radio]:checked {
border: 1px solid black;
}
این سلکتور هرچیزی که قبلا چک شده باشد را انتخاب میکند، برای مثال یک دکمه رادیویی، یک چک باکس و ... ، به همین سادگی.
پشتیبانی مرورگرها :
IE9+
Firefox
Chrome
Safari
Opera
نمایش دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/checked.html)18. X:after Selectorاین یکی از راه های خلاقانه و مفید برای سلکت های متفاوت است، به مثال زیر توجه کنید :
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
با استفاده از این ترفند میتوانیم یک فضای خالی ایجاد کنیم و سپس آن را پاک کنیم، به این طریق میتوانیم زمانی که متد overflow:hidden را نداریم کار خود را پیش ببریم.
پشتیبانی مرورگر ها :
IE8+
Firefox
Chrome
Safari
Opera
19. X:hover
div:hover {
background: #e3e3e3;
}
اگر میخواهید هنگامی که ماوس کاربر روی یک المنت رفت اتفاقی بیوفتد میتوانید از این pseudo class استفاده کنید، از این قابلیت میتوانید برای نمایش حالت های مختلف استفاده کنید، برای مثال زمانی که ماوس روی یک تگ a رفت یک border-bottom برای آن نمایش داده شود :
a:hover {
border-bottom: 1px solid black;
}
پشتیبانی مرورگرها :
IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera
20. X:not Selectordiv:not(#container) {
color: blue;
}
این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید :
*:not(p) {
color: green;
}
پشتیبانی مرورگرها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/not.html)21. X::pseudoElement Selector
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
میتوانیم از pseudo element ها با استفاده از :: استفاده کنیم و به یک قسمت از یک المنت ویژگی های خاص بدهیم، برای مثل خط اول، یا کلمه ی اول، توجه داشته باشید که این خاصیت ها باید به المنت های block داده شود.
با قطعه کد زیر اولین کلمه ی یک پاراگراف را میتوانیم بگیریم :
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
این ویژگی برای صفحاتی که حالت روزنامه ای مانند دارند و میخواهند به خط اول یا کلمه ی اول یک ویژگی خاص بدهند بسیار مفید است.
پشتیبانی مرورگر ها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/pseudoElements.html)22. X:nth-child(n) Selector
li:nth-child(3) {
color: red;
}
میتوانید به nth-child یک عدد بدهید و آن را برابر با فرزند آن عنصر قرار دهید، این عدد از صفر شروع نمیشود و برای مثال اگر میخواهید عنصر دوم را انتخاب کنید باید بنویسید li:nth-child(2) . همچنین میتوانیم به صورت متغیر مانند از این قابلیت استفاده کنیم برای مثال با استفاده از li:nth-child(4n) میتوانیم 4تا 4تا ویژگی ای را که میخواهیم اعمال کنیم.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nth.html)23. X:nth-last-child(n) Selector
li:nth-last-child(2) {
color: red;
}
اگر یک لیست بزرگ داشتید و میخواستید فقط سه عنصر آخر آن را انتخاب کنید چه کار میکرددی ؟ آنگاه نیاز به استفاده از این سلکتور دارید.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthLast.html)24. X:nth-of-type(n) Selector
ul:nth-of-type(3) {
border: 1px solid black;
}
همانطور که نیاز دارید گاهی اوقات فرزند ها را بدست آورید، نیاز دارید که با توجه به نوع المنت ها آنها را بدست آورید. یک لیست با 5000 عضو را تجسم کنید، اگر میخواهید سومین ul را بگیرید و هیچ نوع ID برای انتخاب آن ندارید، میتوانید از nth-of-type استفاده کنید و سومین ul را بگیرید.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthOfType.html)25. X:nth-last-of-type(n) Selector
ul:nth-last-of-type(3) {
border: 1px solid black;
}
میتوانیم برای اینکه شمارش را از اتنها شروع کنیم از nth-last-of-type استفاده کنیم.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
26. X:first-child Selector
ul li:first-child {
border-top: none;
}
با استفاده از این pseudo class میتوانید اولین عنصر را انتخاب کنید و آن را به دست آورید، برای مثال فرض کنید یک لیست ویو دارید و هرکدام از آنها یک border-top و border-bottom دارند، با استفاده از این کلاس ها میتوانید این حاشیه را از اولین و آخرین عنصر بردارید.
پشتیبانی مرورگر ها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html)27. X:last-child Selector
ul > li:last-child {
color: green;
}
این سلکتور دقیقا برخلاف first-child میباشد.
پشتیبانی مرورگر ها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html)28. X:only-child Selector
div p:only-child {
color: red;
}
کم پیش می آید که از این سلکتور استفاده کنید، اما با این حال همیشه برای استفاده وجود دارد، با استفاده از این سلکتور میتوانید تنها فرزند از یک پدر را سلکت کنید.
پشتیبانی مرورگر ها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyChild.html)29. X:only-of-type Selector
li:only-of-type {
font-weight: bold;
}
با استفاده از این سلکتور میتوانید المنت هایی را انتخاب کنید که خواهر و برادری با پدرشان ندارند.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyOfType.html)30. X:first-of-type Selectorبا استفاده از این سلکتور میتوانید اولین خواهر و برادر یک نوع را انتخاب کنید، برای مثال، با توجه به قطعه کد زیر :
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
راه حل 1
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
راه حل 2
p + ul li:last-child {
font-weight: bold;
}
راه حل 3
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstOfType.html)نتیجه گیریاگر میخواهید از مرورگرهایی مانند IE6 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.
* {
margin: 0;
padding: 0;
}
ابتدا یک سلکتور ساده را معرفی میکنیم، سلکتور ستاره تمام المنت های درون صفحه را انتخاب میکند، خیلی از طراحان وب از این سلکتور استفاده میکنند تا به تمام المنت های صفحه margin و padding صفر بدهند، سلکتور ستاره همچنین میتواند در سلکتورهای دیگر به کار برود :#container * {
border: 1px solid black;
}
در این کد هر المنتی که فرزند container باشد را انتخاب میکند.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/star.html)2 - X Selector##container {
width: 960px;
margin: auto;
}
اضافه کردن علامت hash یا # در اول هر سلکتور باعث میشود از طریق ID آن سلکتور را انتخاب کنیم، از این طریق سلکت های زیادی در صفحه انجام میدهیم، اما هنگامی که از IE استفاده میکنید حواس خود را نسبت به مشکلاتی که ممکن است ایجاد شود جمع کنید، همچنین در مقاله ای که قبلا در مجیدآنلاین منتشر شد ویژگی های CSS (http://www.majidonline.com/article/%D9%88%DB%8C%DA%98%DA%AF%D9%87%D8%A7%DB%8C_CSS_%DB %8C%D8%A7_CSS_Specificity_%D8%B1%D8%A7_%DB%8C%D8%A 7%D8%AF_%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF.html) را بررسی کردیم که میتوانید در آنجا تفاوت بین ID و سایر سلکتورها را یاد بگیرید. باید به خاطر داشته باشید که 2 بار نمیتوانید از IDD استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های HTML5 برای سلکت کردن استفاده کنید و یا از کلاس های pseudo استفاده کنید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/id.html)3. X Selector..error {
color: red;
}
این یک سلکتور Class است، فرق سلکتورهای ID و Class این است که هنگامی که توسط Class سلکت انجام میدهید میتوانید چندین و چندبار سلکت انجام دهید اما هنگام استفاده از ID نمیتوانید، هنگامی از Class استفاده کنید که میخواهید استایل خود را به گروهی از المنت ها بدهید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/class.html)4. X Y Selectorli a {
text-decoration: none;
}
یکی دیگر از سلکتورهای پرطرفدار دیگر این سلکتور است، زمانی میخواهید سلکت های خود را دقیق تر کنید باید از این روش استفاده کنید، برای مثال، اگر میخواهید تمام تگ های a که دارای یک لیست نامرتب هستند را سلکت کنید میتوانید از کد بالا استفاده کنید.
نکته ی مهم : اگر سلکتور شما به صورت X Y Z A B .error در آمد دچار مشکل میشوید، همیشه زمانی که میخواهید این همه سلکتور پشت هم بگذارید حتما از خود بپرسید که آیا همچین کاری واقعا ضروری است یا نه ؟ اگر ضروری نیست این کار را انجام ندهید.
پشتیبانی مرورگرها
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/descend.html)5. X Selectora { color: red; }
ul { margin-left: 0; }
اگر بخواهید همه ی تگ های یک نوع المنت را سلکت کنید چه کار میکنید ؟ اگر بخواهید همه ی تگ ها بر اساس نوع آنها و نه بر اساس id و class سلکت کنید چه کار میکنید ؟ باید از روش بالا استفاده کنید، اگر میخواهید تمام تگ های a را سلکت کنید از خط اول مثال بالا و اگر میخواهید تمام تگ های ul را سلکت کنید از خط دوم استفاده کنید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/tagName.html)6. X:visited و X:linka:link { color: red; }
a:visted { color: purple; }
از x:link برای زمانی که میخواهید تمام تگ های a که قابلیت کلیک شدن دارند را سلکت کنید استفاده کنید، همچنین از x:visited برای زمانی که میخواهید تمام تگ های a که دیده شده اند یا کلیک شده اند را سلکت کنید استفاده کنید.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/links.html)7. X + Y Selectorul + p {
color: red;
}
برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید، برای مثال در اینجا اولین تگ p که دقیقا پس از هر تگ ul قرار دارد قرمز رنگ میشود میشود.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/adjacent.html)8. X > Y Selectordiv#container > ul {
border: 1px solid black;
}
تفاوت بین حالت X Y و X > Y این است که دومی تنها فرزندان مستقیم را انتخاب میکند، برای مثال، با توجه به قطعه کد زیر :<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
یک سلکتور #container>ul تمام ul هایی را انتخاب میکند که فرزند مستقیم تگ div با ID برابر با container هستند، برای مثالul هایی فرزند تگ li هستند را انتخاب نمیکند، این روش هنگامی که میخواهید از سلکتورهای CSS در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.
پشتیبانی مرورگر ها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/childcombinator.html)9. X ~ Y Selectorul ~ p {
color: red;
}
این سلکتور همانند سلکتور X+Y است، در سلکتور X+Y تنها اولین المنتی که پس از سلکتور پیشین میومد انتخاب میشد اما در اینجا، هرتگ p که در هرجای کد فرزند تگ ul است را انتخاب میکند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/generalcombinator.html)10. X[title] Selectora[title] {
color: green;
}
در این مثال، تگ های a را انتخاب میکند که صفت title دارند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes.html)11. X[href="foo"] Selectora[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
قطعه کد بالا تمام تگ های a را انتخاب میکند که به http://net.tutsplus.com لینک میشوند و رنگ سبز میگیرند و بقیه تگ های a بی تاثیر می مانند، همچنین برای اضافه کردن ویژگی های بیشتر میتواند از عبارات باقاعده استفاده کنید.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes2.html)12. X[href*="nettuts"] Selectora[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
حرف * به این معنی است که value ما یعنی کلمه ی tuts ممکن است در هر جایی ظاهر شود، بنابراین تمام حالت ها مانند nettuts.com یا tutsplus.com و ... انتخاب میشوند، حالا برای یک سایتی که عضو evanto نیست اما در رشته ی url خود کلمه ی tuts دارد چه اتفاقی می افتد ؟ در این صورت باید از ^ و $ استفاده کنیم.
پشتیبانی مرورگر ها:
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes3.html)13. X[href^="http"] Selectora[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
تا حالا دقت کرده اید که خیلی از سایت ها چگونه یک آیکون را دقیقا بعد از یک لینک نمایش میدهند ؟ این یک کار ساده است، این کار به راحتی توسط عبارات باقاعده قابل انجام بر روی یک رشته متنی است، اگر بخواهیم تمام تگ های a که با http شروع میشوند را انتخاب کنیم، از یک سلکتور مانند بالا استفاده میکنیم.
حالا اگر بخواهیم بجای اینکه تمام لینک ها را انتخاب کنیم، تنها لینک هایی را انتخاب کنیم که دارای یک تگ a هستند ؟ این کار را میتوانیم با جست و جوی رشته ی متنی url انجام دهیم.
پشتیبانی مرورگر :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes4.html)14. X[href$=".jpg"] Selectora[href$=".jpg"] {
color: red;
}
با استفاده از $ در عبارات با قاعده میتوانید انتهای یک رشته متنی را بدست آورید، در این مثال میخواهیم تمام تگ هایی را انتخاب کنیم که به یک img لینک میشوند یا حداقل یک url که انتهای آن .jpg دارد، دقت کنید که قطعه کد بالا برای عکس های gif یا png کار نمیکند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes5.html)15. X[data-*="foo"] Selectora[data-filetype="image"] {
color: red;
}
به شماره هشت برگردید، اگر بخواهیم تمام نوع های عکس مانند png و jpeg و jpg و gif را انتخاب کنیم چه کار میکنیم ؟ میتوانیم سلکتورهای چندگانه بنویسیم برای مثال :a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
اما این کار سخت و غیربهینه است، کار دیگر این است که صفت data-filetype اضافه کنیم به تمام تگ های a که به یک عکس متصل میشوند.<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
به این صورت به سادگی، میتوانیم کار خود را به پایان برسانیم :a[data-filetype="image"] {
color: red;
}
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes6.html)16. X[foo~="bar"] Selector X[foo~="bar"]a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
این سلکتور یک سلکتور خیلی مفید و کاربردی است، تعداد کمی از انسان ها همچین حقه هایی را میدانند، سیمبل ~ میتواند به ما کمک کند یک صفتی را انتخاب کنیم که در آن فاصله ی از هم جدا داریم، بر اساس مثالی که در شماره 15 داشتیم، میتوانیم یک صفت data-info بسازیم و آن هر چیزی که نیاز داریم توسط فاصله کنارهم قرار دهیم، در این مثال تمام لینک ها و لینک هایی که به عکس متصل هستند را در نظر میگیریم :<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
حالا با استفاده از صفت ~ میتوانیم هر تگ لینکی که دارای آن value ها است را انتخاب کنیم :/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes7.html)17. X:checked Selectorinput[type=radio]:checked {
border: 1px solid black;
}
این سلکتور هرچیزی که قبلا چک شده باشد را انتخاب میکند، برای مثال یک دکمه رادیویی، یک چک باکس و ... ، به همین سادگی.
پشتیبانی مرورگرها :
IE9+
Firefox
Chrome
Safari
Opera
نمایش دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/checked.html)18. X:after Selectorاین یکی از راه های خلاقانه و مفید برای سلکت های متفاوت است، به مثال زیر توجه کنید :.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
با استفاده از این ترفند میتوانیم یک فضای خالی ایجاد کنیم و سپس آن را پاک کنیم، به این طریق میتوانیم زمانی که متد overflow:hidden را نداریم کار خود را پیش ببریم.
پشتیبانی مرورگر ها :
IE8+
Firefox
Chrome
Safari
Opera
19. X:hoverdiv:hover {
background: #e3e3e3;
}
اگر میخواهید هنگامی که ماوس کاربر روی یک المنت رفت اتفاقی بیوفتد میتوانید از این pseudo class استفاده کنید، از این قابلیت میتوانید برای نمایش حالت های مختلف استفاده کنید، برای مثال زمانی که ماوس روی یک تگ a رفت یک border-bottom برای آن نمایش داده شود :a:hover {
border-bottom: 1px solid black;
}
پشتیبانی مرورگرها :
IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera
20. X:not Selectordiv:not(#container) {
color: blue;
}
این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید :*:not(p) {
color: green;
}
پشتیبانی مرورگرها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/not.html)21. X::pseudoElement Selectorp::first-line {
font-weight: bold;
font-size: 1.2em;
}
میتوانیم از pseudo element ها با استفاده از :: استفاده کنیم و به یک قسمت از یک المنت ویژگی های خاص بدهیم، برای مثل خط اول، یا کلمه ی اول، توجه داشته باشید که این خاصیت ها باید به المنت های block داده شود.
با قطعه کد زیر اولین کلمه ی یک پاراگراف را میتوانیم بگیریم :p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
این ویژگی برای صفحاتی که حالت روزنامه ای مانند دارند و میخواهند به خط اول یا کلمه ی اول یک ویژگی خاص بدهند بسیار مفید است.
پشتیبانی مرورگر ها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/pseudoElements.html)22. X:nth-child(n) Selectorli:nth-child(3) {
color: red;
}
میتوانید به nth-child یک عدد بدهید و آن را برابر با فرزند آن عنصر قرار دهید، این عدد از صفر شروع نمیشود و برای مثال اگر میخواهید عنصر دوم را انتخاب کنید باید بنویسید li:nth-child(2) . همچنین میتوانیم به صورت متغیر مانند از این قابلیت استفاده کنیم برای مثال با استفاده از li:nth-child(4n) میتوانیم 4تا 4تا ویژگی ای را که میخواهیم اعمال کنیم.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nth.html)23. X:nth-last-child(n) Selectorli:nth-last-child(2) {
color: red;
}
اگر یک لیست بزرگ داشتید و میخواستید فقط سه عنصر آخر آن را انتخاب کنید چه کار میکرددی ؟ آنگاه نیاز به استفاده از این سلکتور دارید.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthLast.html)24. X:nth-of-type(n) Selectorul:nth-of-type(3) {
border: 1px solid black;
}
همانطور که نیاز دارید گاهی اوقات فرزند ها را بدست آورید، نیاز دارید که با توجه به نوع المنت ها آنها را بدست آورید. یک لیست با 5000 عضو را تجسم کنید، اگر میخواهید سومین ul را بگیرید و هیچ نوع ID برای انتخاب آن ندارید، میتوانید از nth-of-type استفاده کنید و سومین ul را بگیرید.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthOfType.html)25. X:nth-last-of-type(n) Selectorul:nth-last-of-type(3) {
border: 1px solid black;
}
میتوانیم برای اینکه شمارش را از اتنها شروع کنیم از nth-last-of-type استفاده کنیم.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
26. X:first-child Selectorul li:first-child {
border-top: none;
}
با استفاده از این pseudo class میتوانید اولین عنصر را انتخاب کنید و آن را به دست آورید، برای مثال فرض کنید یک لیست ویو دارید و هرکدام از آنها یک border-top و border-bottom دارند، با استفاده از این کلاس ها میتوانید این حاشیه را از اولین و آخرین عنصر بردارید.
پشتیبانی مرورگر ها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html)27. X:last-child Selectorul > li:last-child {
color: green;
}
این سلکتور دقیقا برخلاف first-child میباشد.
پشتیبانی مرورگر ها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html)28. X:only-child Selectordiv p:only-child {
color: red;
}
کم پیش می آید که از این سلکتور استفاده کنید، اما با این حال همیشه برای استفاده وجود دارد، با استفاده از این سلکتور میتوانید تنها فرزند از یک پدر را سلکت کنید.
پشتیبانی مرورگر ها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyChild.html)29. X:only-of-type Selectorli:only-of-type {
font-weight: bold;
}
با استفاده از این سلکتور میتوانید المنت هایی را انتخاب کنید که خواهر و برادری با پدرشان ندارند.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyOfType.html)30. X:first-of-type Selectorبا استفاده از این سلکتور میتوانید اولین خواهر و برادر یک نوع را انتخاب کنید، برای مثال، با توجه به قطعه کد زیر :<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
راه حل 1ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
راه حل 2p + ul li:last-child {
font-weight: bold;
}
راه حل 3ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstOfType.html)نتیجه گیریاگر میخواهید از مرورگرهایی مانند IE6 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.
* {
margin: 0;
padding: 0;
}
ابتدا یک سلکتور ساده را معرفی میکنیم، سلکتور ستاره تمام المنت های درون صفحه را انتخاب میکند، خیلی از طراحان وب از این سلکتور استفاده میکنند تا به تمام المنت های صفحه margin و padding صفر بدهند، سلکتور ستاره همچنین میتواند در سلکتورهای دیگر به کار برود :
#container * {
border: 1px solid black;
}
در این کد هر المنتی که فرزند container باشد را انتخاب میکند.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/star.html)2 - X Selector#
#container {
width: 960px;
margin: auto;
}
اضافه کردن علامت hash یا # در اول هر سلکتور باعث میشود از طریق ID آن سلکتور را انتخاب کنیم، از این طریق سلکت های زیادی در صفحه انجام میدهیم، اما هنگامی که از IE استفاده میکنید حواس خود را نسبت به مشکلاتی که ممکن است ایجاد شود جمع کنید، همچنین در مقاله ای که قبلا در مجیدآنلاین منتشر شد ویژگی های CSS (http://www.majidonline.com/article/%D9%88%DB%8C%DA%98%DA%AF%D9%87%D8%A7%DB%8C_CSS_%DB %8C%D8%A7_CSS_Specificity_%D8%B1%D8%A7_%DB%8C%D8%A 7%D8%AF_%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF.html) را بررسی کردیم که میتوانید در آنجا تفاوت بین ID و سایر سلکتورها را یاد بگیرید. باید به خاطر داشته باشید که 2 بار نمیتوانید از IDD استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های HTML5 برای سلکت کردن استفاده کنید و یا از کلاس های pseudo استفاده کنید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/id.html)3. X Selector.
.error {
color: red;
}
این یک سلکتور Class است، فرق سلکتورهای ID و Class این است که هنگامی که توسط Class سلکت انجام میدهید میتوانید چندین و چندبار سلکت انجام دهید اما هنگام استفاده از ID نمیتوانید، هنگامی از Class استفاده کنید که میخواهید استایل خود را به گروهی از المنت ها بدهید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/class.html)4. X Y Selector
li a {
text-decoration: none;
}
یکی دیگر از سلکتورهای پرطرفدار دیگر این سلکتور است، زمانی میخواهید سلکت های خود را دقیق تر کنید باید از این روش استفاده کنید، برای مثال، اگر میخواهید تمام تگ های a که دارای یک لیست نامرتب هستند را سلکت کنید میتوانید از کد بالا استفاده کنید.
نکته ی مهم : اگر سلکتور شما به صورت X Y Z A B .error در آمد دچار مشکل میشوید، همیشه زمانی که میخواهید این همه سلکتور پشت هم بگذارید حتما از خود بپرسید که آیا همچین کاری واقعا ضروری است یا نه ؟ اگر ضروری نیست این کار را انجام ندهید.
پشتیبانی مرورگرها
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/descend.html)5. X Selector
a { color: red; }
ul { margin-left: 0; }
اگر بخواهید همه ی تگ های یک نوع المنت را سلکت کنید چه کار میکنید ؟ اگر بخواهید همه ی تگ ها بر اساس نوع آنها و نه بر اساس id و class سلکت کنید چه کار میکنید ؟ باید از روش بالا استفاده کنید، اگر میخواهید تمام تگ های a را سلکت کنید از خط اول مثال بالا و اگر میخواهید تمام تگ های ul را سلکت کنید از خط دوم استفاده کنید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/tagName.html)6. X:visited و X:link
a:link { color: red; }
a:visted { color: purple; }
از x:link برای زمانی که میخواهید تمام تگ های a که قابلیت کلیک شدن دارند را سلکت کنید استفاده کنید، همچنین از x:visited برای زمانی که میخواهید تمام تگ های a که دیده شده اند یا کلیک شده اند را سلکت کنید استفاده کنید.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/links.html)7. X + Y Selector
ul + p {
color: red;
}
برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید، برای مثال در اینجا اولین تگ p که دقیقا پس از هر تگ ul قرار دارد قرمز رنگ میشود میشود.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/adjacent.html)8. X > Y Selector
div#container > ul {
border: 1px solid black;
}
تفاوت بین حالت X Y و X > Y این است که دومی تنها فرزندان مستقیم را انتخاب میکند، برای مثال، با توجه به قطعه کد زیر :
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
یک سلکتور #container>ul تمام ul هایی را انتخاب میکند که فرزند مستقیم تگ div با ID برابر با container هستند، برای مثالul هایی فرزند تگ li هستند را انتخاب نمیکند، این روش هنگامی که میخواهید از سلکتورهای CSS در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.
پشتیبانی مرورگر ها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/childcombinator.html)9. X ~ Y Selector
ul ~ p {
color: red;
}
این سلکتور همانند سلکتور X+Y است، در سلکتور X+Y تنها اولین المنتی که پس از سلکتور پیشین میومد انتخاب میشد اما در اینجا، هرتگ p که در هرجای کد فرزند تگ ul است را انتخاب میکند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/generalcombinator.html)10. X[title] Selector
a[title] {
color: green;
}
در این مثال، تگ های a را انتخاب میکند که صفت title دارند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes.html)11. X[href="foo"] Selector
a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
قطعه کد بالا تمام تگ های a را انتخاب میکند که به http://net.tutsplus.com لینک میشوند و رنگ سبز میگیرند و بقیه تگ های a بی تاثیر می مانند، همچنین برای اضافه کردن ویژگی های بیشتر میتواند از عبارات باقاعده استفاده کنید.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes2.html)12. X[href*="nettuts"] Selector
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
حرف * به این معنی است که value ما یعنی کلمه ی tuts ممکن است در هر جایی ظاهر شود، بنابراین تمام حالت ها مانند nettuts.com یا tutsplus.com و ... انتخاب میشوند، حالا برای یک سایتی که عضو evanto نیست اما در رشته ی url خود کلمه ی tuts دارد چه اتفاقی می افتد ؟ در این صورت باید از ^ و $ استفاده کنیم.
پشتیبانی مرورگر ها:
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes3.html)13. X[href^="http"] Selector
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
تا حالا دقت کرده اید که خیلی از سایت ها چگونه یک آیکون را دقیقا بعد از یک لینک نمایش میدهند ؟ این یک کار ساده است، این کار به راحتی توسط عبارات باقاعده قابل انجام بر روی یک رشته متنی است، اگر بخواهیم تمام تگ های a که با http شروع میشوند را انتخاب کنیم، از یک سلکتور مانند بالا استفاده میکنیم.
حالا اگر بخواهیم بجای اینکه تمام لینک ها را انتخاب کنیم، تنها لینک هایی را انتخاب کنیم که دارای یک تگ a هستند ؟ این کار را میتوانیم با جست و جوی رشته ی متنی url انجام دهیم.
پشتیبانی مرورگر :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes4.html)14. X[href$=".jpg"] Selector
a[href$=".jpg"] {
color: red;
}
با استفاده از $ در عبارات با قاعده میتوانید انتهای یک رشته متنی را بدست آورید، در این مثال میخواهیم تمام تگ هایی را انتخاب کنیم که به یک img لینک میشوند یا حداقل یک url که انتهای آن .jpg دارد، دقت کنید که قطعه کد بالا برای عکس های gif یا png کار نمیکند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes5.html)15. X[data-*="foo"] Selector
a[data-filetype="image"] {
color: red;
}
به شماره هشت برگردید، اگر بخواهیم تمام نوع های عکس مانند png و jpeg و jpg و gif را انتخاب کنیم چه کار میکنیم ؟ میتوانیم سلکتورهای چندگانه بنویسیم برای مثال :
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
اما این کار سخت و غیربهینه است، کار دیگر این است که صفت data-filetype اضافه کنیم به تمام تگ های a که به یک عکس متصل میشوند.
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
به این صورت به سادگی، میتوانیم کار خود را به پایان برسانیم :
a[data-filetype="image"] {
color: red;
}
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes6.html)16. X[foo~="bar"] Selector
X[foo~="bar"]a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
این سلکتور یک سلکتور خیلی مفید و کاربردی است، تعداد کمی از انسان ها همچین حقه هایی را میدانند، سیمبل ~ میتواند به ما کمک کند یک صفتی را انتخاب کنیم که در آن فاصله ی از هم جدا داریم، بر اساس مثالی که در شماره 15 داشتیم، میتوانیم یک صفت data-info بسازیم و آن هر چیزی که نیاز داریم توسط فاصله کنارهم قرار دهیم، در این مثال تمام لینک ها و لینک هایی که به عکس متصل هستند را در نظر میگیریم :
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
حالا با استفاده از صفت ~ میتوانیم هر تگ لینکی که دارای آن value ها است را انتخاب کنیم :
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes7.html)17. X:checked Selector
input[type=radio]:checked {
border: 1px solid black;
}
این سلکتور هرچیزی که قبلا چک شده باشد را انتخاب میکند، برای مثال یک دکمه رادیویی، یک چک باکس و ... ، به همین سادگی.
پشتیبانی مرورگرها :
IE9+
Firefox
Chrome
Safari
Opera
نمایش دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/checked.html)18. X:after Selectorاین یکی از راه های خلاقانه و مفید برای سلکت های متفاوت است، به مثال زیر توجه کنید :
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
با استفاده از این ترفند میتوانیم یک فضای خالی ایجاد کنیم و سپس آن را پاک کنیم، به این طریق میتوانیم زمانی که متد overflow:hidden را نداریم کار خود را پیش ببریم.
پشتیبانی مرورگر ها :
IE8+
Firefox
Chrome
Safari
Opera
19. X:hover
div:hover {
background: #e3e3e3;
}
اگر میخواهید هنگامی که ماوس کاربر روی یک المنت رفت اتفاقی بیوفتد میتوانید از این pseudo class استفاده کنید، از این قابلیت میتوانید برای نمایش حالت های مختلف استفاده کنید، برای مثال زمانی که ماوس روی یک تگ a رفت یک border-bottom برای آن نمایش داده شود :
a:hover {
border-bottom: 1px solid black;
}
پشتیبانی مرورگرها :
IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera
20. X:not Selectordiv:not(#container) {
color: blue;
}
این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید :
*:not(p) {
color: green;
}
پشتیبانی مرورگرها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/not.html)21. X::pseudoElement Selector
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
میتوانیم از pseudo element ها با استفاده از :: استفاده کنیم و به یک قسمت از یک المنت ویژگی های خاص بدهیم، برای مثل خط اول، یا کلمه ی اول، توجه داشته باشید که این خاصیت ها باید به المنت های block داده شود.
با قطعه کد زیر اولین کلمه ی یک پاراگراف را میتوانیم بگیریم :
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
این ویژگی برای صفحاتی که حالت روزنامه ای مانند دارند و میخواهند به خط اول یا کلمه ی اول یک ویژگی خاص بدهند بسیار مفید است.
پشتیبانی مرورگر ها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/pseudoElements.html)22. X:nth-child(n) Selector
li:nth-child(3) {
color: red;
}
میتوانید به nth-child یک عدد بدهید و آن را برابر با فرزند آن عنصر قرار دهید، این عدد از صفر شروع نمیشود و برای مثال اگر میخواهید عنصر دوم را انتخاب کنید باید بنویسید li:nth-child(2) . همچنین میتوانیم به صورت متغیر مانند از این قابلیت استفاده کنیم برای مثال با استفاده از li:nth-child(4n) میتوانیم 4تا 4تا ویژگی ای را که میخواهیم اعمال کنیم.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nth.html)23. X:nth-last-child(n) Selector
li:nth-last-child(2) {
color: red;
}
اگر یک لیست بزرگ داشتید و میخواستید فقط سه عنصر آخر آن را انتخاب کنید چه کار میکرددی ؟ آنگاه نیاز به استفاده از این سلکتور دارید.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthLast.html)24. X:nth-of-type(n) Selector
ul:nth-of-type(3) {
border: 1px solid black;
}
همانطور که نیاز دارید گاهی اوقات فرزند ها را بدست آورید، نیاز دارید که با توجه به نوع المنت ها آنها را بدست آورید. یک لیست با 5000 عضو را تجسم کنید، اگر میخواهید سومین ul را بگیرید و هیچ نوع ID برای انتخاب آن ندارید، میتوانید از nth-of-type استفاده کنید و سومین ul را بگیرید.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthOfType.html)25. X:nth-last-of-type(n) Selector
ul:nth-last-of-type(3) {
border: 1px solid black;
}
میتوانیم برای اینکه شمارش را از اتنها شروع کنیم از nth-last-of-type استفاده کنیم.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
26. X:first-child Selector
ul li:first-child {
border-top: none;
}
با استفاده از این pseudo class میتوانید اولین عنصر را انتخاب کنید و آن را به دست آورید، برای مثال فرض کنید یک لیست ویو دارید و هرکدام از آنها یک border-top و border-bottom دارند، با استفاده از این کلاس ها میتوانید این حاشیه را از اولین و آخرین عنصر بردارید.
پشتیبانی مرورگر ها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html)27. X:last-child Selector
ul > li:last-child {
color: green;
}
این سلکتور دقیقا برخلاف first-child میباشد.
پشتیبانی مرورگر ها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html)28. X:only-child Selector
div p:only-child {
color: red;
}
کم پیش می آید که از این سلکتور استفاده کنید، اما با این حال همیشه برای استفاده وجود دارد، با استفاده از این سلکتور میتوانید تنها فرزند از یک پدر را سلکت کنید.
پشتیبانی مرورگر ها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyChild.html)29. X:only-of-type Selector
li:only-of-type {
font-weight: bold;
}
با استفاده از این سلکتور میتوانید المنت هایی را انتخاب کنید که خواهر و برادری با پدرشان ندارند.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyOfType.html)30. X:first-of-type Selectorبا استفاده از این سلکتور میتوانید اولین خواهر و برادر یک نوع را انتخاب کنید، برای مثال، با توجه به قطعه کد زیر :
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
راه حل 1
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
راه حل 2
p + ul li:last-child {
font-weight: bold;
}
راه حل 3
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstOfType.html)نتیجه گیریاگر میخواهید از مرورگرهایی مانند IE6 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.
* {
margin: 0;
padding: 0;
}
ابتدا یک سلکتور ساده را معرفی میکنیم، سلکتور ستاره تمام المنت های درون صفحه را انتخاب میکند، خیلی از طراحان وب از این سلکتور استفاده میکنند تا به تمام المنت های صفحه margin و padding صفر بدهند، سلکتور ستاره همچنین میتواند در سلکتورهای دیگر به کار برود :#container * {
border: 1px solid black;
}
در این کد هر المنتی که فرزند container باشد را انتخاب میکند.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/star.html)2 - X Selector##container {
width: 960px;
margin: auto;
}
اضافه کردن علامت hash یا # در اول هر سلکتور باعث میشود از طریق ID آن سلکتور را انتخاب کنیم، از این طریق سلکت های زیادی در صفحه انجام میدهیم، اما هنگامی که از IE استفاده میکنید حواس خود را نسبت به مشکلاتی که ممکن است ایجاد شود جمع کنید، همچنین در مقاله ای که قبلا در مجیدآنلاین منتشر شد ویژگی های CSS (http://www.majidonline.com/article/%D9%88%DB%8C%DA%98%DA%AF%D9%87%D8%A7%DB%8C_CSS_%DB %8C%D8%A7_CSS_Specificity_%D8%B1%D8%A7_%DB%8C%D8%A 7%D8%AF_%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF.html) را بررسی کردیم که میتوانید در آنجا تفاوت بین ID و سایر سلکتورها را یاد بگیرید. باید به خاطر داشته باشید که 2 بار نمیتوانید از IDD استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های HTML5 برای سلکت کردن استفاده کنید و یا از کلاس های pseudo استفاده کنید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/id.html)3. X Selector..error {
color: red;
}
این یک سلکتور Class است، فرق سلکتورهای ID و Class این است که هنگامی که توسط Class سلکت انجام میدهید میتوانید چندین و چندبار سلکت انجام دهید اما هنگام استفاده از ID نمیتوانید، هنگامی از Class استفاده کنید که میخواهید استایل خود را به گروهی از المنت ها بدهید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/class.html)4. X Y Selectorli a {
text-decoration: none;
}
یکی دیگر از سلکتورهای پرطرفدار دیگر این سلکتور است، زمانی میخواهید سلکت های خود را دقیق تر کنید باید از این روش استفاده کنید، برای مثال، اگر میخواهید تمام تگ های a که دارای یک لیست نامرتب هستند را سلکت کنید میتوانید از کد بالا استفاده کنید.
نکته ی مهم : اگر سلکتور شما به صورت X Y Z A B .error در آمد دچار مشکل میشوید، همیشه زمانی که میخواهید این همه سلکتور پشت هم بگذارید حتما از خود بپرسید که آیا همچین کاری واقعا ضروری است یا نه ؟ اگر ضروری نیست این کار را انجام ندهید.
پشتیبانی مرورگرها
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/descend.html)5. X Selectora { color: red; }
ul { margin-left: 0; }
اگر بخواهید همه ی تگ های یک نوع المنت را سلکت کنید چه کار میکنید ؟ اگر بخواهید همه ی تگ ها بر اساس نوع آنها و نه بر اساس id و class سلکت کنید چه کار میکنید ؟ باید از روش بالا استفاده کنید، اگر میخواهید تمام تگ های a را سلکت کنید از خط اول مثال بالا و اگر میخواهید تمام تگ های ul را سلکت کنید از خط دوم استفاده کنید.
پشتیبانی مرورگرها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/tagName.html)6. X:visited و X:linka:link { color: red; }
a:visted { color: purple; }
از x:link برای زمانی که میخواهید تمام تگ های a که قابلیت کلیک شدن دارند را سلکت کنید استفاده کنید، همچنین از x:visited برای زمانی که میخواهید تمام تگ های a که دیده شده اند یا کلیک شده اند را سلکت کنید استفاده کنید.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/links.html)7. X + Y Selectorul + p {
color: red;
}
برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید، برای مثال در اینجا اولین تگ p که دقیقا پس از هر تگ ul قرار دارد قرمز رنگ میشود میشود.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/adjacent.html)8. X > Y Selectordiv#container > ul {
border: 1px solid black;
}
تفاوت بین حالت X Y و X > Y این است که دومی تنها فرزندان مستقیم را انتخاب میکند، برای مثال، با توجه به قطعه کد زیر :<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
یک سلکتور #container>ul تمام ul هایی را انتخاب میکند که فرزند مستقیم تگ div با ID برابر با container هستند، برای مثالul هایی فرزند تگ li هستند را انتخاب نمیکند، این روش هنگامی که میخواهید از سلکتورهای CSS در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.
پشتیبانی مرورگر ها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/childcombinator.html)9. X ~ Y Selectorul ~ p {
color: red;
}
این سلکتور همانند سلکتور X+Y است، در سلکتور X+Y تنها اولین المنتی که پس از سلکتور پیشین میومد انتخاب میشد اما در اینجا، هرتگ p که در هرجای کد فرزند تگ ul است را انتخاب میکند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/generalcombinator.html)10. X[title] Selectora[title] {
color: green;
}
در این مثال، تگ های a را انتخاب میکند که صفت title دارند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes.html)11. X[href="foo"] Selectora[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
قطعه کد بالا تمام تگ های a را انتخاب میکند که به http://net.tutsplus.com لینک میشوند و رنگ سبز میگیرند و بقیه تگ های a بی تاثیر می مانند، همچنین برای اضافه کردن ویژگی های بیشتر میتواند از عبارات باقاعده استفاده کنید.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes2.html)12. X[href*="nettuts"] Selectora[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
حرف * به این معنی است که value ما یعنی کلمه ی tuts ممکن است در هر جایی ظاهر شود، بنابراین تمام حالت ها مانند nettuts.com یا tutsplus.com و ... انتخاب میشوند، حالا برای یک سایتی که عضو evanto نیست اما در رشته ی url خود کلمه ی tuts دارد چه اتفاقی می افتد ؟ در این صورت باید از ^ و $ استفاده کنیم.
پشتیبانی مرورگر ها:
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes3.html)13. X[href^="http"] Selectora[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
تا حالا دقت کرده اید که خیلی از سایت ها چگونه یک آیکون را دقیقا بعد از یک لینک نمایش میدهند ؟ این یک کار ساده است، این کار به راحتی توسط عبارات باقاعده قابل انجام بر روی یک رشته متنی است، اگر بخواهیم تمام تگ های a که با http شروع میشوند را انتخاب کنیم، از یک سلکتور مانند بالا استفاده میکنیم.
حالا اگر بخواهیم بجای اینکه تمام لینک ها را انتخاب کنیم، تنها لینک هایی را انتخاب کنیم که دارای یک تگ a هستند ؟ این کار را میتوانیم با جست و جوی رشته ی متنی url انجام دهیم.
پشتیبانی مرورگر :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes4.html)14. X[href$=".jpg"] Selectora[href$=".jpg"] {
color: red;
}
با استفاده از $ در عبارات با قاعده میتوانید انتهای یک رشته متنی را بدست آورید، در این مثال میخواهیم تمام تگ هایی را انتخاب کنیم که به یک img لینک میشوند یا حداقل یک url که انتهای آن .jpg دارد، دقت کنید که قطعه کد بالا برای عکس های gif یا png کار نمیکند.
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes5.html)15. X[data-*="foo"] Selectora[data-filetype="image"] {
color: red;
}
به شماره هشت برگردید، اگر بخواهیم تمام نوع های عکس مانند png و jpeg و jpg و gif را انتخاب کنیم چه کار میکنیم ؟ میتوانیم سلکتورهای چندگانه بنویسیم برای مثال :a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
اما این کار سخت و غیربهینه است، کار دیگر این است که صفت data-filetype اضافه کنیم به تمام تگ های a که به یک عکس متصل میشوند.<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
به این صورت به سادگی، میتوانیم کار خود را به پایان برسانیم :a[data-filetype="image"] {
color: red;
}
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes6.html)16. X[foo~="bar"] Selector X[foo~="bar"]a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
این سلکتور یک سلکتور خیلی مفید و کاربردی است، تعداد کمی از انسان ها همچین حقه هایی را میدانند، سیمبل ~ میتواند به ما کمک کند یک صفتی را انتخاب کنیم که در آن فاصله ی از هم جدا داریم، بر اساس مثالی که در شماره 15 داشتیم، میتوانیم یک صفت data-info بسازیم و آن هر چیزی که نیاز داریم توسط فاصله کنارهم قرار دهیم، در این مثال تمام لینک ها و لینک هایی که به عکس متصل هستند را در نظر میگیریم :<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
حالا با استفاده از صفت ~ میتوانیم هر تگ لینکی که دارای آن value ها است را انتخاب کنیم :/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
پشتیبانی مرورگرها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes7.html)17. X:checked Selectorinput[type=radio]:checked {
border: 1px solid black;
}
این سلکتور هرچیزی که قبلا چک شده باشد را انتخاب میکند، برای مثال یک دکمه رادیویی، یک چک باکس و ... ، به همین سادگی.
پشتیبانی مرورگرها :
IE9+
Firefox
Chrome
Safari
Opera
نمایش دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/checked.html)18. X:after Selectorاین یکی از راه های خلاقانه و مفید برای سلکت های متفاوت است، به مثال زیر توجه کنید :.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
با استفاده از این ترفند میتوانیم یک فضای خالی ایجاد کنیم و سپس آن را پاک کنیم، به این طریق میتوانیم زمانی که متد overflow:hidden را نداریم کار خود را پیش ببریم.
پشتیبانی مرورگر ها :
IE8+
Firefox
Chrome
Safari
Opera
19. X:hoverdiv:hover {
background: #e3e3e3;
}
اگر میخواهید هنگامی که ماوس کاربر روی یک المنت رفت اتفاقی بیوفتد میتوانید از این pseudo class استفاده کنید، از این قابلیت میتوانید برای نمایش حالت های مختلف استفاده کنید، برای مثال زمانی که ماوس روی یک تگ a رفت یک border-bottom برای آن نمایش داده شود :a:hover {
border-bottom: 1px solid black;
}
پشتیبانی مرورگرها :
IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera
20. X:not Selectordiv:not(#container) {
color: blue;
}
این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید :*:not(p) {
color: green;
}
پشتیبانی مرورگرها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/not.html)21. X::pseudoElement Selectorp::first-line {
font-weight: bold;
font-size: 1.2em;
}
میتوانیم از pseudo element ها با استفاده از :: استفاده کنیم و به یک قسمت از یک المنت ویژگی های خاص بدهیم، برای مثل خط اول، یا کلمه ی اول، توجه داشته باشید که این خاصیت ها باید به المنت های block داده شود.
با قطعه کد زیر اولین کلمه ی یک پاراگراف را میتوانیم بگیریم :p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
این ویژگی برای صفحاتی که حالت روزنامه ای مانند دارند و میخواهند به خط اول یا کلمه ی اول یک ویژگی خاص بدهند بسیار مفید است.
پشتیبانی مرورگر ها :
IE6+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/pseudoElements.html)22. X:nth-child(n) Selectorli:nth-child(3) {
color: red;
}
میتوانید به nth-child یک عدد بدهید و آن را برابر با فرزند آن عنصر قرار دهید، این عدد از صفر شروع نمیشود و برای مثال اگر میخواهید عنصر دوم را انتخاب کنید باید بنویسید li:nth-child(2) . همچنین میتوانیم به صورت متغیر مانند از این قابلیت استفاده کنیم برای مثال با استفاده از li:nth-child(4n) میتوانیم 4تا 4تا ویژگی ای را که میخواهیم اعمال کنیم.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nth.html)23. X:nth-last-child(n) Selectorli:nth-last-child(2) {
color: red;
}
اگر یک لیست بزرگ داشتید و میخواستید فقط سه عنصر آخر آن را انتخاب کنید چه کار میکرددی ؟ آنگاه نیاز به استفاده از این سلکتور دارید.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthLast.html)24. X:nth-of-type(n) Selectorul:nth-of-type(3) {
border: 1px solid black;
}
همانطور که نیاز دارید گاهی اوقات فرزند ها را بدست آورید، نیاز دارید که با توجه به نوع المنت ها آنها را بدست آورید. یک لیست با 5000 عضو را تجسم کنید، اگر میخواهید سومین ul را بگیرید و هیچ نوع ID برای انتخاب آن ندارید، میتوانید از nth-of-type استفاده کنید و سومین ul را بگیرید.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthOfType.html)25. X:nth-last-of-type(n) Selectorul:nth-last-of-type(3) {
border: 1px solid black;
}
میتوانیم برای اینکه شمارش را از اتنها شروع کنیم از nth-last-of-type استفاده کنیم.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
26. X:first-child Selectorul li:first-child {
border-top: none;
}
با استفاده از این pseudo class میتوانید اولین عنصر را انتخاب کنید و آن را به دست آورید، برای مثال فرض کنید یک لیست ویو دارید و هرکدام از آنها یک border-top و border-bottom دارند، با استفاده از این کلاس ها میتوانید این حاشیه را از اولین و آخرین عنصر بردارید.
پشتیبانی مرورگر ها :
IE7+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html)27. X:last-child Selectorul > li:last-child {
color: green;
}
این سلکتور دقیقا برخلاف first-child میباشد.
پشتیبانی مرورگر ها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html)28. X:only-child Selectordiv p:only-child {
color: red;
}
کم پیش می آید که از این سلکتور استفاده کنید، اما با این حال همیشه برای استفاده وجود دارد، با استفاده از این سلکتور میتوانید تنها فرزند از یک پدر را سلکت کنید.
پشتیبانی مرورگر ها :
IE9+
Firefox
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyChild.html)29. X:only-of-type Selectorli:only-of-type {
font-weight: bold;
}
با استفاده از این سلکتور میتوانید المنت هایی را انتخاب کنید که خواهر و برادری با پدرشان ندارند.
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyOfType.html)30. X:first-of-type Selectorبا استفاده از این سلکتور میتوانید اولین خواهر و برادر یک نوع را انتخاب کنید، برای مثال، با توجه به قطعه کد زیر :<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
راه حل 1ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
راه حل 2p + ul li:last-child {
font-weight: bold;
}
راه حل 3ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
پشتیبانی مرورگر ها :
IE9+
Firefox 3.5+
Chrome
Safari
Opera
مشاهده دمو (http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstOfType.html)نتیجه گیریاگر میخواهید از مرورگرهایی مانند IE6 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.