آموزش های این وب سایت به صورت رایگان در دسترس است. اطلاعات بیشتر
مشکل عدم دسترسی خریداران پیشین به برخی آموزش ها برطرف شد
بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]

سلکتور های CSS  , javascript   قسمت سوم و آخر اضافه شد.

reza piry ghadim  9 سال پیش  6 سال پیش
+8 0

در اینجا میخوام درمورد سلکتورهای سی اس اسی که در موردشون کم تر اطلاعات داریم بحث بشه.

همون طوری که میدونید

کار با خیلی سلکتور ها رو خودتون بهتر از من میدونید. مثل سلکتور های * و کلاس و ایدی و... در اینجا از تکرار مکررات پرهیز خواهیم کرد. ولی سعی میکنم به موارد بیشتری اشاره کنم. درضمن در این جا سعی میکنم با مثال توضیح .

---------------------------------------------------------------------------------------------------------------

a:link { color: green; }
a:visted { color: purple; }

این دو سلکتور بالا که از نوع شبه کلاس Pseudo-class (که تلفط آن سودو کلاس) است بیشتر برای تگ a به کار میروند. که لینک ها را به دو صورت از هم متمایز میکند. در حالت عادی(سبز رنگ) و یا آنهایی که قبلا کلیک و مشاهده شده اند(بنفش). که میتوانیم استایلهای مخصوص را در این دو حالت مشخص کنیم.

---------------------------------------------------------------------------------------------------------------

ul + p {
   color: red;
}

این سلکتور اولین خواهر یا برادر نزدیک به خود را انتخاب میکند. برای روشن تر شدن این سلکتور مثالی میزنیم.

  • first
  • second

first p tag

second p tag

third p tag

در مثال بالا ما یک div داریم با آی دی container . این div دارای ۴ فرزند میباشد( ۳ تگ p و یک تگ ul )
هنگامی که ما از سلکتور ul+p استفاده کنیم یعنی اولین p که بعد از ul آمده است را انتخاب میکند. به عبارت دیگر ul دارای ۳ خواهر و برادر است . حال ما نزدیکترین خواهر یا برادر که کوچکتر از ul هست را انتخاب میکنیم . که همان تگ p با عبارت first p tag است.

---------------------------------------------------------------------------------------------------------------

div#container > ul {
   border: 1px solid black;
}

این سلکتور تقریبا شبیه به سلکتور 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>
  • List Item
    • Child
  • List Item
  • List Item
  • List Item

در مثال بالا سلکتور #container > ul تنها لیستهای نامرتبی Ul را انتخاب میکند که مستقیما فرزند div است ( و دیگر در زیر شاخه های آن به دنبال ul نخواهد بود . در حالی که اگر ما سلکتور #container ul را استفاده کنیم، تمام ul ها که در این div قرار دارد را انتخاب میکند.
این سلکتور در جی کوئری و جاوا اسکریپت خیلی میتواند استفاده های فراوانی داشته باشد .

---------------------------------------------------------------------------------------------------------------

ul ~ p {
   color: red;
}

این سلکتور بسیار شبیه به سلکتور x+y است. همانطور که در بالا توضیح دادیم. سلکتور X+y اولین sibling خواهر یا برادر کوچکتر از خود را انتخاب میکند. ولی در این سلکتور تمام sibling خواهر و برادرهای کوچکتر از خود را انتخاب میکند.

---------------------------------------------------------------------------------------------------------------

a[title] {
    color: green;
}

ین سلکتور عناصری که دارای یک خصوصیت ویژه هستند را انتخاب میکند که به آن انتخابگر ویژگی attributes selector میگوئیم.
برای مثال ما برای تگ a برای ایجاد یک لینک خصوصیتی داریم به نام title که توضیحات بیشتری راجع به لینک میدهد و به صورت tooltip عمل میکند. هنگامی که ما در صفحه خود بخواهیم لینک هایی که دارای خصوصیت title هستند را انتخاب کنیم از مثال بالا کمک میگیریم . بدین صورت تنها لینک هایی که شامل title هستند سبز رنگ خواهند شد.

---------------------------------------------------------------------------------------------------------------

a[href="http://webkral.ir"] {
    color: #1f6053; 
}

این سلکتور تمامی تگ های a که به سایت amirmoharmi.ir لینک شده اند را انتخاب میکند . البته مشکلی که در اینجا وجود دارد این است که تمامی لینک ها باید دقیقا شامل عبارت webkral.ir باشند و لینک های داخل این سایت را شامل نمیشود. برای اینکه بتوانیم آن لینک ها را نیز موقع انتخاب گزینش کنیم باید مقداری با عبارت های منظم آشنا باشیم.

 

حدود بیست تای دیگه هم هست که بعدا اونا رو هم قرار میدم.

بعد از این ها هم میریم سراغ سلکتور هایCSS4

در ضمن منبع فعلی و اصلی(code.tutsplus.com)

 برای این سوال 2 پاسخ وجود دارد.
پاسخ به سوال 
reza piry ghadim  9 سال پیش
+4 0

قسمت دوم آموزش سلکتور ها در CSS :

 امید وارم از این قسمت هم خوشتون بیاد.

-------------------------------------------------------------------------------------------------------------

a[href*="tuts"] {
   color: #1f6053; /* nettuts green */
}

در تکمیل مثال قبل ما در اینجا از عبارات منظم استفاده کردیم . برای اینکه تمامی لینکهایی که حاوی webkral هست انتخاب شود . و این کار را با علامت ستاره انجام دادیم. حال فرض کنید که ما بخواهیم لینک هایی انتخاب شوند که در ابتدا و یا انتهای آن کلمه خاصی وجود داشته باشد. باز در اینجا عبارات منظم میتواند کمک کننده باشد . برای انتخاب ابتدای عبارت از علامت ^ و انتهای عبارت از $ استفاده میکنیم.

-------------------------------------------------------------------------------------------------------------

a[href^="http"] {
    background: url(path/to/external/icon.png) no-repeat;
    padding-left: 10px;
}

در بسیاری از سایتها مشاهده کرده اید که هنگامی که لینکی به یک صفحه خارج از سایت خود زده اند معمولا با یک آیکون کوچک در کنار آنها لینک مورد نظر را انتخاب کرده اند.برای این مورد از سلکتور بالا استفاده کرده اند . همانطور که در مورد ۱۲ گفتیم، از عبارات منظم میتوانیم برای مشخص کردن ابتدای یک عبارت از علامت ^ استفاده کنیم . در این مثال تماملی لینکهایی که با http شروع شده اند را میتوان انتخاب کرد.
حال اگر می بخواهیم لینکهایی را به صورت عکس هستند را مشخص کنیم، به چه صورت عمل میکنیم؟ در این مورد ما باید انتهای یک عبارت را مورد جستجو قرار دهیم.

-------------------------------------------------------------------------------------------------------------

a[href$=".jpg"] {
    color: red;
}

در اینجا ما باز از عبارات منظم Regular Expression استفاده کرده ایم. علامت $ انتهای یک رشته را مشخص میکند. یا به عبارتی تمامی لینک هایی که در انتهای لینک آنها عکسهایی با پسوند .jpg هستند را مشخص میکند.
البته توجه داشته باشید در این مورد تنها عکس هایی با پسوند .jpg انتخاب میشوند و برای عکسهایی با پسوند gif و png این مورد خاص کاربرد ندارد

-------------------------------------------------------------------------------------------------------------

a[data-filetype="image"] {
    color: red;
}

خوب برای اینکه بتونیم لینک هایی که شامل تمامی عکس ها با پسوندهای مختلف را انتخاب کنیم ، باید به چه صورت عمل کنیم ؟؟
یکی از راهها این است که به روش زیر عمل کنیم.

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

-------------------------------------------------------------------------------------------------------------

a[data-info~="external"] {
    color: red;
}
 
a[data-info~="image"] {
    border: 1px solid black;
}

این سلکتور میتواند بسیار مفید باشد. علامت تیلدا ~ به ما اجازه میدهد که به یک موردی اشاره کنیم که در بین یک لیستی که با فاصله از هم جدا شده ، قرار دارد.
در این مثال ما از یک ویژگی شخصی استفاده کردیم ، میتوانیم از ویژگی data-info استفاده کنیم، که در داخل آن لیستی را اضافه کنیم که با فاصله از هم جدا کرده ایم .
در این مثال توجه داشته باشید که ما از دو نوع external و image استفاده کرده ایم . برای مثال :

 "<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

با این نوع تعریف کردن میتوانیم استایلهای متفاوتی برای اکسترنال و به صورت جداگانه برای عکس در نظر بگیریم که در زیر مشاهده میکنید.

/* 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;
}

-------------------------------------------------------------------------------------------------------------

input[type=radio]:checked {
    border: 1px solid black;
}

 این شبه کلاس pseudo class بیشتر در طراحی فرم و به خصوص در چک باکس chekboxو لیست رادیوییradiobottonاستفاده میشود . در صورتی که یک لیست رادیویی RadioBotton انتخاب شد یا به اصلاح checked شود میتوانیم استایل خاصی را برایش تعریف کرد. به احتمال زیاد دوستان همتون با این سودوکلاس اشنایید خلاصه گفتم که همه لیس رو گفته باشم...

-------------------------------------------------------------------------------------------------------------

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix { 
   *display: inline-block; 
   height: 1%;
}

این سودو کلاس هم به تازگی خیلی مورد استفاده قرار میگیرد و مردم هر روز راههای تازه ای برای استفاده موثر از آن پیدا میکنند.
از این سودوکلاس برای اینکه یک محتوایی قبل و یا بعد از هر المنتی قرار بدهیم، استفاده می شود.

-------------------------------------------------------------------------------------------------------------

 

خب امیدوارم تا اینجا استفاده کافی برده باشید. بازم در اینده بقیه مطالب رو در این تاپیک قرار میدم.

من خودم این مطلب رو خوندم و واقعا خوشم اومد. یعنی قبل دونستن اینا خیلی کارم سخت بود . امیدوارم شما هم بیشتر روشون کار کنید.

این بحث ادامه دارد...

موفق باشید.

پاسخ به سوال 
reza piry ghadim  9 سال پیش
+1 0

قسمت سوم و اخر اموزش سلکتور های CSS :

----------------------------------------------------------------------------------------------------------------

div:hover {
   background: #e3e3e3;
}

این سلکتور برای کسانی که آشنایی کمی نیز با سی اس اس داشته باشند بسیار آشناست . این سلکتور هنگامی استفاده میشود که کاربر موس خود را بر روی عنصر خاصی قرار دهد این استایل روی آن اعمال شود .
به خاطر داشته باشید، ورژن های قدیمی ie از این سودوکلاس استفاده نمیکند.
تکنیکی که در این مورد میتوانیم استفاده کنیم این است که بر روی یک لینک استایل زیر را آن اعمال کنیم.

a:hover {
   border-bottom: 1px solid black;
}

این تکنیک ظاهر خیلی بهتری نسبت به decoration:underline; برای شما ایجاد خواهد کرد.

-------------------------------------------------------------------------------------------------------------

div:not(#container) {
    color: blue;
}

این سلکتور منفی هم میتواند استفاده های مفیدی داشته باشد . فرض کنید در یک صفحه تعداد زیادی div داریم که میخواهیم استایل خاصی را بر روی آنها اعمال کنیم و این استایل بر روی یک div خاص نمیخواهیم اعمال شود. در این صورت مانند بالا عمل میکنیم.

و این که میتونید یه المنت رو انتخاب کنید که استایل خاصی که رو همه المنت ها دارند رو این نداشته باشه.

*:not(p) {
   color: green;
}

-------------------------------------------------------------------------------------------------------------

p::first-line {
    font-weight: bold;
    font-size: 1.2em;
}

همانطور که در بالا سودو کلاس pseudo class را توضیح دادیم در این قسمت به سودو المنت pseudo elements میرسیم. سودو المنت قسمتی از یک المنت را مدنظر قرار میدهد. و برای استفاده از آن :: به کار میرود. به عنوان مثال اگر بخواهیم در یک پاراگراف خط اول آن استایل خاصی داشته باشد و یا اولین حرف آن بزرگ نوشته شود ( که این بیشتر برای حروف لاتین مورد استفاده قرار میدهد) از این مورد استفاده میکنیم .

انتخاب اولین حرف از تمام تگهای پاراگراف

p::first-letter {
    float: left;
    font-size: 2em;
    font-weight: bold;
    font-family: cursive;
    padding-right: 2px;
}

همانطور که گفتم این سودوالمنت بیشتر برای حروف لاتین استفاده میشود و شما این تکنیک را در روزنامه های لاتین بسیار مشاهده کرده اید که حرف اول آنها با حروف درشت نوشته شده است .
انتخاب اولین خط از تگهای پاراگراف

p::first-line {
    font-weight: bold;
    font-size: 1.2em;
}

این مثال نیز مانند مثال قبل عمل میکند با این تفاوت که به جای اولین حرف اولین خط پاراگراف را استایل میدهد.

--------------------------------------------------------------------------------------------------------------

li:nth-child(3) {
    color: red;
}

این سودو کلاس خیلی از مشکلاتی که قبلا با آن روبرو بودیم را برای ما حل کرده است. زمانی که میخواستیم چندمین فرزند یک المنت را انتخاب کنیم . فرض کنید ما یک لیست نامرتب ul داریم که دارای ۶ آیتم باشد. برای اینکه بتوانیم سومین آیتم را قرمز رنگ کنیم، میتوانیم از مثال بالا استفاده کنیم. فقط باید مدنظر داشته باشید که در داخل nth-child(n) به جای n باید یک عدد به عنوان پارامتر ورودی قرار دهید . که شمارش آن هم از یک شروع میشود .
یک تکنیک دیگری که در اینجا میشود استفاده کرد این است که ما لیست آیتمی داشته باشیم که شامل ۶۰ آیتم باشد و بخواهیم که هر ۴ آیتم در میان استایل داشته باشد. ( در واقع مضربی از ۴ ) از nth-child(4n) استفاده میکنیم

--------------------------------------------------------------------------------------------------------------

li:nth-last-child(2) {
    color: red;
}

حال فرض کنید که شما یک لیست آیتم در ul دارید که شامل ۴۰۰ آیتم باشد و شما بخواهید همیشه سومین آیتم از انتها دارای یک استایل باشد . میتوانیم مانند مثال قبل از nth-child(397) استفاده کنیم . این مورد نیاز شما را حل خواهد کرد ولی اگر شما مواردی به لیست خود اضافه کنید و یا کم کنید دیگر این استایل به سومین آیتم از انتها تعلق ندارد . برای حل کردن این مشکل میتوانید از این سودو کلاس استفاده کنید. Nth-last-child(n) . مقداری که به جای n به عنوان پارامتر ورودی مینویسید همیشه از آخر لیست لحاظ خواهد کرد .

--------------------------------------------------------------------------------------------------------------

ul:nth-of-type(3) {
    border: 1px solid black;
}

شما در یک صفحه ۴ لیست نامرتب ul دارید و میخواهید سومین لیست دارای استایل خاصی باشد . برای این که چندمین المنت از یک نوع را انتخاب کنید از این سلکتور میتوانید استفاده کرد.

--------------------------------------------------------------------------------------------------------------

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

همانطور که میتوانید حدس بزنید این سلکتور از انتهای صفحه شروع به شمارش میکند . و سومین لیست نامرتب از انتها را انتخاب میکند.

--------------------------------------------------------------------------------------------------------------

ul li:first-child {
    border-top: none;
}

این سلکتور اولین فرزند خود را انتخاب میکند که در طراحی سایت میتواند بسیار مفید باشد . تصور کنید شما لیست آیتمی دارید که به صورت منو در آورده اید و به همه آنها حاشیه خاصی داده اید ولی میخواهید که اولین عنصر و آخرین عنصر استایل خاصی داشته باشد. برای انتخاب اولین عنصر از این سلکتور استفاده میشود.

--------------------------------------------------------------------------------------------------------------

ul > li:last-child {
   color: green;
}

بر خلاف سلکتور بالا که اولین فرزند را انتخاب میکرد در اینجا آخرین فرزند انتخاب می شود.

--------------------------------------------------------------------------------------------------------------

div p:only-child {
    color: red;
}

این مورد شاید به ندرت استفاده شود. که به صورت عامیانه میتوانیم بگوییم تک فرزندی را قبول دارد . اگر داخل یک div تنها و فقط تنها یک تگ پاراگراف باشد را انتخاب میکند . و آن رنگ متن پاراگراف را قرمز رنگ میکند. حال تصور کنید که شما در یک div دو پاراگراف داشته باشید . در این حالت هیچ کدام از پاراگراف ها قرمز نخواهند شد. چون آن div دارای دو فرزند است .
و مثال دیگر این که شما در داخل یک div یک پاراگراف دارید و یک لینک(تگ a) دارید . باز هم آن پاراگراف انتخاب نمیشود چون این div نیز دارای دو فرزند است .

--------------------------------------------------------------------------------------------------------------

li:only-of-type {
    font-weight: bold;
}

این سلکتور نیز تقریبا مانند مثال بالا عمل میکند. فرض کنید شما در صفحه ۳ لیست نامرتب دارید که هر کدام به ترتیب دارای ۱و۲ و ۳ فرزند هستند. این سلکتور تنها آیتمی را انتخاب میکند که تنها شامل یک li است . تنها تفاوت این است که میتواند نوع های دیگری داشته باشد و تنها نوع مشخص شده فقط باید تنها باشد.

--------------------------------------------------------------------------------------------------------------

دوستان تقریبا تموم شد ! اگه هر کدوم رو خوب متوجه نشدید برید به این لینک   اینجا مینونید مثال های جالبی هم پیدا کنید. اموزش ها هم به ترتیب همون لینکه.

خب امیدوارم بتونید بهره کافی رو از مطالعه این بخش اموزش هم برده باشید.

(اگر جایی هم اشتباهی بوده باشه اطلاع بدید ویرایش کنم)

0 0
بیاد بالا تا دوستان بیشتر استفاده کنند (6 سال پیش)
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .