azami.cu@gmail.com | +98912 373 8239

انتخاب گرها در فایل های استایل

معرفی استایل برای صفحات و دستگاه ها با اندازه های مختلف و استاندارد
html,css,training,web,education,jquery,java script,web,selector,وب,سایت,طراحی,responsive,media query
به همت مهندس اعظمی در 1392/06/05


انتخاب گرهای عمومی


انتخاب با نام گروه:
که بر روی تمامی نوع عنصر انتخاب شده تاثیر می گذارد.

element { style properties } 

span {
   color: #ffffff;
}
                            


انتخاب با نام کلاس:
که بر روی تمامی عناصری که دارای کلاس انتخاب شده هستند تاثیر می گذارد.

.classname { style properties }
[class~=classname] { style properties }

span.classy {
  background-color: DodgerBlue;
}
.classy {
  background-color: DodgerBlue;
}
                            


انتخاب با id :
که بر روی عنصری که دارای id انتخاب شده هستد تاثیر می گذارد.(id بصورت یکتا در هر صفحه وجود دارد)

#id_value { style properties }
[id=id_value] { style properties }

span#identified {
  background-color: DodgerBlue;
}
#classy {
  background-color: DodgerBlue;
}
                            


انتخاب همه با عنصر *:


/*  ns|* - matches all elements in namespace ns
    *|* - matches all elements
    |* - matches all elements without any declared namespace */
                                   
                                    
*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}


                            


بعنوان مثال:


A green span in a red paragraph.

A red span in a green paragraph.


انتخاب بر اساس یک مشخصه:


/*   
[attr]
    Represents an element with an attribute name of attr.
[attr=value]
    Represents an element with an attribute name of attr and whose value is exactly "value".
[attr~=value]
    Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".
[attr|=value]
    Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.
[attr^=value]
    Represents an element with an attribute name of attr and whose value is the prefixed by "value".
[attr$=value]
    Represents an element with an attribute name of attr and whose value is the suffixed by "value".
[attr*=value]
    Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring. */
                                   
                                    
 /* All spans with a "lang" attribute are bold */
    span[lang] {font-weight:bold;}
 
    /* All spans in Portuguese are green */
    span[lang="pt"] {color:green;}

    /* All spans in US English are blue  */
    span[lang~="en-us"] {color: blue;}

    /* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
    span[lang|="zh"] {color: red;}

    /* All internal links have a gold background */
    a[href^="#"] {background-color:gold}

    /* All links to urls ending in ".cn" are red */
    a[href$=".cn"] {color: red;}

    /* All links to with "example" in the url have a grey background */
    a[href*="example"] {background-color: #CCCCCC;}


                            


بعنوان مثال:


English: Hello World!
Portuguese: Olá Mundo!
Chinese (Simplified): 世界您好!
Chinese (Traditional): 世界您好!


Tags:   html,css,training,web,education,jquery,java script,web,selector,وب,سایت,طراحی,responsive,media query