1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

مرجع انتخابگرها در css -سه بخش

شروع موضوع توسط minaaa ‏30/8/13 در انجمن CSS

  1. کاربر ارزشمند

    تاریخ عضویت:
    ‏9/12/10
    ارسال ها:
    19,869
    تشکر شده:
    6,409
    امتیاز دستاورد:
    113
    مرجع انتخابگرها در CSS - بخش اول


    .class

    .intro
    {
    background-color:yellow;
    }
    این مثال تمامی عناصری که class="intro" هستند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    #id
    #name
    {
    background-color:yellow;
    }
    این مثال تمامی عناصری که "id="name هستند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    *
    *
    {
    background-color:yellow;
    }
    این مثال تمامی عناصر را انتخاب و style مورد نظر را به آنها اعمال میکند.
    element
    p
    {
    background-color:yellow;
    }
    این مثال تمامی تگ های <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
    element,element
    h1,p
    {
    background-color:yellow;
    }
    این مثال تمامی تگ های <p> و h1 را انتخاب و style مورد نظر را به آنها اعمال میکند.
    element element
    div p
    {
    background-color:yellow;
    }
    تمام تگ های <p> که در داخل تگ <div> قرار دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    element>element
    div>p
    {
    background-color:yellow;
    }
    تمام تگ های <p> که والد (parent) آنها تگ <div> میباشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
    element+element
    div+p
    {
    background-color:yellow;
    }
    تمام تگ های <p> که بلافاصله بعد از تگ <div> قرار دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.
     
  2. کاربر ارزشمند

    تاریخ عضویت:
    ‏9/12/10
    ارسال ها:
    19,869
    تشکر شده:
    6,409
    امتیاز دستاورد:
    113
    پاسخ : مرجع انتخابگرها در css -سه بخش

    مرجع انتخابگرها در CSS - بخش دوم
    [attribute]
    a[target]
    {
    background-color:yellow;
    }
    تمام تگ های<a> که ویژگی target را نیز دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    <a href="http://www.pars-soft.ir">گروه نرم افزار ی پارس سافت</a>
    <a href="http://www.pars-soft.ir" target="_blank">طراحی وب سایت</a>
    [attribute=value]
    a[target=_blank]
    {
    background-color:yellow;
    }
    تمام تگ های<a> که ویژگی target=_blank را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.
    [attribute~=value]
    [title~=pars]
    {
    background-color:yellow;
    }
    تمام تگ های<a> که ویژگی "title=pars" را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.
    [attribute|=value]
    [lang|=fa]
    {
    background-color:yellow;
    }
    تمامی عناصری که ویژگی "lang" آنها با "fa" آغاز میشود، انتخاب و style مورد نظر را به آنها اعمال میکند.
    :link
    a:link
    {
    background-color:yellow;
    }
    تمام تگ های<a> که روی آنها کلیک نشده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.
    :visited
    a:visited
    {
    background-color:yellow;
    }
    تمام تگ های<a> که روی آنها کلیک شده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.
    :hover
    a:hover
    {
    background-color:yellow;
    }
    تمام تگ های<a> را زمانی که با ماوس روی آنها میروید، انتخاب و style مورد نظر را به آنها اعمال میکند.
    :focus
    input:focus
    {
    background-color:yellow;
    }
    تمام تگ های input را زمانی که انتخاب میکنید، style مورد نظر را به آنها اعمال میکند.
     
  3. کاربر ارزشمند

    تاریخ عضویت:
    ‏9/12/10
    ارسال ها:
    19,869
    تشکر شده:
    6,409
    امتیاز دستاورد:
    113
    پاسخ : مرجع انتخابگرها در css -سه بخش

    مرجع انتخابگرها در CSS - بخش سوم
    :first-letter

    p:first-letter
    {
    font-size:200%;
    color:#8A2BE2;
    }
    اولین کلمه از تمام تگ های <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
    ویژگی هایی که در first-letter میتوانند مورد استفاده قرار بگیرند.

    1. font properties
    2. color properties
    3. background properties
    4. margin properties
    5. padding properties
    6. border properties
    7. text-decoration
    8. vertical-align (only if float is 'none')
    9. text-transform
    10. line-height
    11. float
    12. clear
    :first-line
    p:first-line
    {
    background-color:yellow;
    }
    اولین خط از تمام تگ های <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
    ویژگی هایی که در first-line میتوانند مورد استفاده قرار بگیرند.

    1. font properties
    2. color properties
    3. background properties
    4. word-spacing
    5. letter-spacing
    6. text-decoration
    7. vertical-align
    8. text-transform
    9. line-height
    10. clear
    :first-child
    p:first-child
    {
    background-color:yellow;
    }
    تمام تگ های <p> که اولین فرزند (child) از پدر و مادر (parent) خود است را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :before
    p:before
    {
    content:"http://pars-soft.ir ";
    }
    به اول تمام تگ های <p> ، لینک طراحی سایت | طراحی وب سایت | شرکت طراحی سایت را اضافه میکند.
    :after
    p:after
    {
    content:"http://pars-soft.ir";
    }
    بعد تمام تگ های <p> ، لینک طراحی سایت | طراحی وب سایت | شرکت طراحی سایت را اضافه میکند.
    :lang
    p:lang(it)
    {
    background:yellow;
    }
    تمام تگ های <p> که با ویژگی "lang=it" شروع میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    element1~element2
    p~ul
    {
    background:#ff0000;
    }
    تمام تگ های <ul> که والد مشترکی با تگ <p> دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    [attribute^=value]
    div[class^="test"]
    {
    background:#ffff00;
    }
    تمام تگ های div که با ویژگی "class=test" شروع میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    [attribute$=value]
    div[class$="test"]
    {
    background:#ffff00;
    }
    تمام تگ های div که با ویژگی "class=test" تمام میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    [attribute*=value]
    div[class*="test"]
    {
    background:#ffff00;
    }
    تمام تگ های div که ویژگی "class=test" را شامل میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :first-of-type
    p:first-of-type
    {
    background:#ff0000;
    }
    اولین تگ <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :last-of-type
    p:last-of-type
    {
    background:#ff0000;
    }
    آخرین تگ <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :only-of-type
    p:only-of-type
    {
    background:#ff0000;
    }
    هر تگ <p> که تک فرزند (only child) والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :nth-child()
    p:nth-child(2)
    {
    background:#ff0000;
    }
    هر تگ <p> که دومین فرزند (only child) والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :nth-last-child()
    p:nth-last-child(2)
    {
    background:#ff0000;
    }
    هر تگ <p> که دومین فرزند (only child) والد (parent) خود از آخر باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :nth-of-type()
    p:nth-of-type(2)
    {
    background:#ff0000;
    }
    هر تگ <p> که دومین تگ <p> از والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :nth-last-of-type()
    p:nth-last-of-type(2)
    {
    background:#ff0000;
    }
    هر تگ <p> که دومین تگ <p> از والد (parent) خود از آخر باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :last-child
    p:last-child
    {
    background:#ff0000;
    }
    برای هر تگ <p> که آخرین فرزند (child) از والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :root
    :root
    {
    background:#ff0000;
    }
    تگ HTML ، را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :empty
    p:empty
    {
    background:#ff0000;
    }
    هر تگ <p> که محتوایی نداشته باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :enabled
    input[type="text"]:enabled
    {
    background:#ffff00;
    }
    تمام تگ های <input> که "type="text باشند و فعال باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :disabled
    input[type="text"]:disabled
    {
    background:#dddddd;
    }
    تمام تگ های <input> که "type="text باشند وغیر فعال باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :checked
    input:checked
    {
    background:#ff0000;
    }
    تمام تگ های <input> که "type="checked باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
    :not
    :not(p)
    {
    background:#ff0000;
    }
    تمامی تگ ها جز تگ <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
    ::selection

    ::selection
    {
    color:#ff0000;
    }
    ::-moz-selection
    {
    color:#ff0000;
    }
    متن هایی که با دوبار کلیک کردن بر آنها انتخاب میشوند ، style مورد نظر را به آنها اعمال میکند
     
  4. داره راه میوفته!

    تاریخ عضویت:
    ‏13/1/18
    ارسال ها:
    21
    تشکر شده:
    8
    امتیاز دستاورد:
    3
    جنسیت:
    زن
    در مباحث کمی پیشرفته تر، دسترسی تودر تو هم وجود داره. یعنی اگر داشته باشیم:

    <div class="test">
    <a href=""></a>
    </div>

    می تونیم به اینصورت دسترسی پیدا کنیم:

    .test a{
    پروپرتی ها
    }