30 selecters cn nh trong css

7/27/2019 30 Selecters Cn Nh Trong Css

1/23

30 Selecters cn nh trong CSS1. *

* {margin: 0;padding: 0;

}on lnh CSS trn s nh hng n tt c cc th trong trang Web (onny thng c dng Reset CSS).

#container * {border: 1px solid black;

}#container * s la chn tt c cc th cha trong thnh phn c id lcontainer.Selector * hot ng vi :

IE6+ Firefox

Chrome Safari Opera

2. #XKhi ta mun nh dng CSS cho mt thnh phn no c id l X th ta dng#X.

#container {width: 960px;margin: auto;

}Selector #Xhot ng vi :

IE6+ Firefox Chrome Safari Opera

3. .X.X s la chn nh dng cho cc thnh phn c class l X

.error {color: red;

}Selector .Xhot ng vi :


4. X YGi s ta c on HTML sau y :

Home


2/23

CSSJQuery

V ta nh dng CSS cho on HTML trn nh sau :

li a { text-decoration: none;color: red;

}Khi hin th trn trnh duyt th ch c ch CSS c mu v chu tc dngca phn m t CSS, cc thnh phn cn li khng b nh hng v vn ginh dng mc nh.

Khi c 1 selector di long ngongX Y Z A B, chng ta phi t hi li l cnht thit phi m t chi tit nh vy hay khng.SelectorX Yhot ng vi :


5. Xa { color: red; }ul { margin-left: 0; }

SelectorX hot ng vi : IE6+ Firefox Chrome Safari Opera

6. X:visited, X:link, X:activea:link { color: red; }a:visted { color: purple; }a:active {color:white;}

a:links nh dng cho cc lin kt cha click ln no, a:active s nh dngcho cc lin kt ang click chut, cn a:visited s

nh dng cho cc lin kt thm qua.

3 Selectors trn hot ng vi : IE7+ Firefox Chrome Safari Opera

7. X + Yul + p {


3/23

color: red;}

SelectorX + Ys la chn th Y nm lin k th X. Nh v d trn th ch cparagraph u tin nm lin sau th ul mi c mu , cc on paragraphcn li khng b nh hng.

SelectorsX + Y hot ng vi : IE7+ Firefox Chrome Safari Opera

8. X > Ydiv#container > ul {

border: 1px solid black;}

nh dng choX > Ytc l nh dng cho th Yl con trc tip ca X, cc

th Ynm trongXnhng khng phi l con trc tip ca th Xth s khngb nh hng.

List Item

Child

List Item List Item

Nu s dng on CSS trn p dng cho phn HTML pha di th ta s ckt qu nh sau :

List ItemChildList ItemList Item

SelectorsX > Y hot ng vi : IE7+ Firefox Chrome Safari Opera

9. X ~ Yul ~ p {

color: red;}


4/23

S dng selectorX~Y nh dng th s nh hng n tt c cc th Ynm pha di th XSelectorsX > Y hot ng vi :

IE7+ Firefox

Chrome Safari Opera

10. X[title]a[title] {

color: green;}

SelectorX[title]

s chn tt c cc thXc thuc tnh title, nhng thXm khng c thuctnh title th s khng nh hng (c th thay thuc tnh title bng bt k

thuc tnh khc).SelectorsX[title] hot ng vi : IE7+ Firefox Chrome Safari Opera

11. X[href="xyz"]a[href="http://google.com.vn"] {

color: #1f6053;}

on m ny nh dng cho tt c cc th a c lin kt ti tranggoogle.com.vn.SelectorsX[href="xyz"] hot ng vi :


12. X[href*="xyz"]a[href*="google"] {

color: #1f6053;

}on m ny nh dng cho tt c cc th a c thuc tnh href cha tgoogle (c th l google.com, google.com.vn).SelectorsX[href*="xyz"] hot ng vi :

IE7+ Firefox Chrome Safari


5/23

Opera13. X[href^="http"]

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

}Khi ta nh dng cho selector a[href^="http"]

tc l nh dng cho tt c cc th a cha lin kt n mt trang web khcnm ngoi trang website ta ang son tho.SelectorsX[href^="http"] hot ng vi :


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

}Again, we use a regular expressions symbol, $, to refer to the end of a string.In this case, were searching for all anchors which link to an image or atleast a url that ends with .jpg. Keep in mind that this certainly wont work forgifs and pngs.View DemoCompatibility

IE7+

Firefox Chrome Safari Opera

15. X[data-*="foo"]view plain copy to clipboard print ?

1. a[data-filetype="image"] {2. color: red;3. }

view plain copy to clipboard print ?1. a[data-filetype="image"] {

2. color: red;3. }

Refer back to number eight; how do we compensate for all of the variousimage types: png, jpeg,jpg, gif? Well, we could create multiple selectors,such as:view plain copy to clipboard print ?

1. a[href$=".jpg"],2. a[href$=".jpeg"],
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/attributes5.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/attributes5.html


6/23

3. a[href$=".png"],4. a[href$=".gif"] {5. color: red;6. }

view plain copy to clipboard print ?

1. a[href$=".jpg"],2. a[href$=".jpeg"],3. a[href$=".png"],4. a[href$=".gif"] {5. color: red;6. }

But, thats a pain in the butt, and is inefficient. Another possible solution is touse custom attributes. What if we added our own data-filetype attribute toeach anchor that links to an image?view plain copy to clipboard print ?

1. Image Link

view plain copy to clipboard print ?1. Image Link Then, with that hookin place, we can use a standard attributes selector totarget only those anchors.view plain copy to clipboard print ?

1. a[data-filetype="image"] {2. color: red;3. }

view plain copy to clipboard print ?1. a[data-filetype="image"] {2. color: red;

3. }View DemoCompatibility


16. X[foo~="bar"]view plain copy to clipboard print ?

1. a[data-info~="external"] {

2. color: red;3. }4.5. a[data-info~="image"] {6. border: 1px solid black;7. }

view plain copy to clipboard print ?1. a[data-info~="external"] {


7/23

2. color: red;3. }4.5. a[data-info~="image"] {6. border: 1px solid black;

7. }Heres a special one thatll impress your friends. Not too many people knowabout this trick. The tilda (~) symbol allows us to target an attribute whichhas a spaced-separated list of values.Going along with our custom attribute from number fifteen, above, we couldcreate a data-info attribute, which can receive a space-separated list ofanything we need to make note of. In this case, well make note of externallinks and links to images just for the example.view plain copy to clipboard print ?

1. " Click Me, Fool

view plain copy to clipboard print ?1. " Click Me, Fool

With that markup in place, now we can target any ths that have either ofthose values, by using the ~ attributes selector trick.view plain copy to clipboard print ?

1. /* Target data-info attr that contains the value "external" */2. a[data-info~="external"] {3. color: red;4. }5.

6. /* And which contain the value "image" */7. a[data-info~="image"] {8. border: 1px solid black;9. }

view plain copy to clipboard print ?1. /* Target data-info attr that contains the value "external" */2. a[data-info~="external"] {3. color: red;4. }5.6. /* And which contain the value "image" */

7. a[data-info~="image"] {8. border: 1px solid black;9. }

Pretty nifty, ay?View DemoCompatibility

IE7+ Firefox


8/23

Chrome Safari Opera

17. X:checkedview plain copy to clipboard print ?

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

view plain copy to clipboard print ?1. input[type=radio]:checked {2. border: 1px solid black;3. }

This pseudo class will only target a user interface element that has beenchecked - like a radio button, or checkbox. It's as simple as that.View DemoCompatibility


18. X:afterThe before and after pseudo elements kick butt. Every day, it seems, peopleare finding new and creative ways to use them effectively. They simplygenerate content around the selected element.Many were first introduced to these classes when they encountered theclear-fix hack.

view plain copy to clipboard print ?1. .clearfix:after {2. content: "";3. display: block;4. clear: both;5. visibility: hidden;6. font-size: 0;7. height: 0;8. }9. 10. .clearfix {11. *display: inline-block;12. _height: 1%;13. }

view plain copy to clipboard print ?1. .clearfix:after {2. content: "";3. display: block;4. clear: both;
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/checked.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/checked.html


9/23

5. visibility: hidden;6. font-size: 0;7. height: 0;8. }9.

10. .clearfix {11. *display: inline-block;12. _height: 1%;13. }

.clearfix:after {content: "";display: block;clear: both;visibility: hidden;font-size: 0;height: 0;

}

.clearfix {*display: inline-block;_height: 1%;

}This hackuses the :after pseudo element to append a space after theelement, and then clear it. It's an excellent trick to have in your tool bag,particularly in the cases when the overflow: hidden; method isn't possible.For another creative use of this, refer to my quick tip on creating shadows.According to the CSS3 Selectors specification, you should technically use the

pseudo element syntax of two colons ::. However, to remain compatible, theuser-agent will accept a single colon usage as well.Compatibility


19. X:hoverview plain copy to clipboard print ?

1. div:hover {

2. background: #e3e3e3;3. }

view plain copy to clipboard print ?1. div:hover {2. background: #e3e3e3;3. }

div:hover {background: #e3e3e3;
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/


10/23

}Oh come on. You know this one. The official term for this is user actionpseudo class. It sounds confusing, but it really isn't. Want to apply specificstyling when a user hovers over an element? This will get the job done!Keep in mind that older version of Internet Explorer don't respond when the

:hover pseudo class is applied to anything other than an anchor th.You'll most often use this selector when applying, for example, a border-bottom to anchor ths, when hovered over.view plain copy to clipboard print ?

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

view plain copy to clipboard print ?1. a:hover {2. border-bottom: 1px solid black;3. }

a:hover {border-bottom: 1px solid black;}Pro-tip - border-bottom: 1px solid black; looks better than text-decoration:underline;.Compatibility

IE6+ (In IE6, :hover must be applied to an anchor element) Firefox Chrome Safari Opera

20. X:not(selector)view plain copy to clipboard print ?

1. div:not(#container) {2. color: blue;3. }

view plain copy to clipboard print ?1. div:not(#container) {2. color: blue;3. }

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

}The negation pseudo class is particularly helpful. Let's say I want to select alldivs, except for the one which has an id of container. The snippet above willhandle that task perfectly.Or, if I wanted to select every single element (not advised) except forparagraph ths, we could do:view plain copy to clipboard print ?

1. *:not(p) {


11/23

2. color: green;3. }

view plain copy to clipboard print ?1. *:not(p) {2. color: green;

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

}View DemoCompatibility


21. X::pseudoElementview plain copy to clipboard print ?

1. p::first-line {2. font-weight: bold;3. font-size: 1.2em;4. }

view plain copy to clipboard print ?1. p::first-line {2. font-weight: bold;3. font-size: 1.2em;4. }

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

}We can use pseudo elements (designated by ::) to style fragments of anelement, such as the first line, or the first letter. Keep in mind that thesemust be applied to block level elements in order to take effect.A pseudo-element is composed of two colons: ::Target the First Letter of a Paragraphview plain copy to clipboard print ?

1. p::first-letter {

2. float: left;3. font-size: 2em;4. font-weight: bold;5. font-family: cursive;6. padding-right: 2px;7. }

view plain copy to clipboard print ?1. p::first-letter {
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/not.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/not.html


12/23

2. float: left;3. font-size: 2em;4. font-weight: bold;5. font-family: cursive;6. padding-right: 2px;

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

}This snippet is an abstraction that will find all paragraphs on the page, andthen sub-target only the first letter of that element.This is most often used to create newspaper-like styling for the first-letter of

an article.Target the First Line of a Paragraphview plain copy to clipboard print ?

1. p::first-line {2. font-weight: bold;3. font-size: 1.2em;4. }

view plain copy to clipboard print ?1. p::first-line {2. font-weight: bold;3. font-size: 1.2em;

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

}Similarly, the ::first-line pseudo element will, as expected, style the first lineof the element only."For compatibility with existing style sheets, user agents must also acceptthe previous one-colon notation for pseudo-elements introduced in CSSlevels 1 and 2 (namely, :first-line, :first-letter, :before and :after). Thiscompatibility is not allowed for the new pseudo-elements introduced in this

specification." - SourceView DemoCompatibility

http://www.w3.org/TR/css3-selectors/http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/pseudoElements.htmlhttp://www.w3.org/TR/css3-selectors/http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/pseudoElements.html


13/23

22. X:nth-child(n)view plain copy to clipboard print ?

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

view plain copy to clipboard print ?1. li:nth-child(3) {2. color: red;3. }

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

}Remember the days when we had no way to target specific elements in astack? The nth-child pseudo class solves that!Please note that nth-child accepts an integer as a parameter, however, thisis not zero-based. If you wish to target the second list item, use li:nth-

child(2).We can even use this to select a variable set of children. For example, wecould do li:nth-child(4n) to select every fourth list item.View DemoCompatibility

IE9+ Firefox 3.5+ Chrome Safari

23. X:nth-last-child(n)view plain copy to clipboard print ?

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

view plain copy to clipboard print ?1. li:nth-last-child(2) {2. color: red;3. }

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

}What if you had a huge list of items in a ul, and only needed to access, say,

the third to the last item? Rather than doing li:nth-child(397), you couldinstead use the nth-last-child pseudo class.This technique works almost identically from number sixteen above,however, the difference is that it begins at the end of the collection, andworks its way back.View DemoCompatibility

IE9+
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nth.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nthLast.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nth.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nthLast.html


14/23

Firefox 3.5+ Chrome Safari Opera

24. X:nth-of-type(n)

view plain copy to clipboard print ?1. ul:nth-of-type(3) {2. border: 1px solid black;3. }

view plain copy to clipboard print ?1. ul:nth-of-type(3) {2. border: 1px solid black;3. }

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

}

There will be times when, rather than selecting a child, you instead need toselect according to the type of element.Imagine mark-up that contains five unordered lists. If you wanted to styleonly the third ul, and didn't have a unique id to hook into, you could use thenth-of-type(n) pseudo class. In the snippet above, only the third ul will have aborder around it.View DemoCompatibility

IE9+ Firefox 3.5+ Chrome Safari

25. X:nth-last-of-type(n)view plain copy to clipboard print ?

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

view plain copy to clipboard print ?1. ul:nth-last-of-type(3) {2. border: 1px solid black;3. }

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

}And yes, to remain consistent, we can also use nth-last-of-type to begin atthe end of the selectors list, and work our way back to target the desiredelement.Compatibility

IE9+
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nthOfType.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nthOfType.html


15/23

Firefox 3.5+ Chrome Safari Opera

26. X:first-child

view plain copy to clipboard print ?1. ul li:first-child {2. border-top: none;3. }

view plain copy to clipboard print ?1. ul li:first-child {2. border-top: none;3. }

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

}

This structural pseudo class allows us to target only the first child of theelement's parent. You'll often use this to remove borders from the first andlast list items.For example, let's say you have a list of rows, and each one has a border-topand a border-bottom. Well, with that arrangement, the first and last item inthat set will look a bit odd.Many designers apply classes of first and last to compensate for this.Instead, you can use these pseudo classes.View DemoCompatibility


27. X:last-childview plain copy to clipboard print ?

1. ul > li:last-child {2. color: green;3. }

view plain copy to clipboard print ?1. ul > li:last-child {2. color: green;3. }

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

}The opposite of first-child, last-child will target the last item of the element'sparent.Example
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/firstChild.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/firstChild.html


16/23

Let's build a simple example to demonstrate one possible use of theseclasses. We'll create a styled list item.Markupview plain copy to clipboard print ?

1.

2. List Item 3. List Item 4. List Item 5.

view plain copy to clipboard print ?1. 2. List Item 3. List Item 4. List Item 5.

List Item List Item List Item

Nothing special here; just a simple list.CSSview plain copy to clipboard print ?

1. ul {2. width: 200px;3. background: #292929;4. color: white;

5. list-style: none;6. padding-left: 0;7. }8. 9. li {10. padding: 10px;11. border-bottom: 1px solid black;12. border-top: 1px solid #3c3c3c;13. }

view plain copy to clipboard print ?1. ul {

2. width: 200px;3. background: #292929;4. color: white;5. list-style: none;6. padding-left: 0;7. }8. 9. li {


17/23

10. padding: 10px;11. border-bottom: 1px solid black;12. border-top: 1px solid #3c3c3c;13. }

ul {

width: 200px;background: #292929;color: white;list-style: none;padding-left: 0;}

li {padding: 10px;border-bottom: 1px solid black;border-top: 1px solid #3c3c3c;

}This styling will set a background, remove the browser-default padding onthe ul, and apply borders to each li to provide a bit of depth.

To add depth to your lists, apply a border-bottom to each li that is a shade ortwo darker than the li's background color. Next, apply a border-top which is acouple shades lighter.


18/23

The only problem, as shown in the image above, is that a border will beapplied to the very top and bottom of the unordered list - which looks odd.Let's use the :first-child and :last-child pseudo classes to fix this.view plain copy to clipboard print ?

1. li:first-child {

2. border-top: none;3. }4. 5. li:last-child {6. border-bottom: none;7. }

view plain copy to clipboard print ?1. li:first-child {2. border-top: none;3. }4.

5. li:last-child {6. border-bottom: none;7. }

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

}

li:last-child {border-bottom: none;

}


19/23

There we go; that fixes it!View DemoCompatibility

IE9+ Firefox Chrome

Safari OperaYep - IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-childview plain copy to clipboard print ?

1. div p:only-child {2. color: red;3. }

view plain copy to clipboard print ?1. div p:only-child {2. color: red;

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

}Truthfully, you probably won't find yourself using the only-child pseudo classtoo often. Nonetheless, it's available, should you need it.
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/firstChild.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/firstChild.html


20/23

It allows you to target elements which are the onlychild of its parent. Forexample, referencing the snippet above, only the paragraph that is the onlychild of the div will be colored, red.Let's assume the following markup.view plain copy to clipboard print ?

1.

My paragraph here.
2. 3. 4.
Two paragraphs total.
5.
6.
view plain copy to clipboard print ?1.

My paragraph here.
2. 3. 4.

5.

6.
My paragraph here.



In this case, the second div's paragraphs will not be targeted; only the firstdiv. As soon as you apply more than one child to an element, the only-childpseudo class ceases to take effect.

View DemoCompatibility


29. X:only-of-typeview plain copy to clipboard print ?

1. li:only-of-type {2. font-weight: bold;

3. }view plain copy to clipboard print ?

1. li:only-of-type {2. font-weight: bold;3. }

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

}
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/onlyChild.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/onlyChild.html


21/23

This structural pseudo class can be used in some clever ways. It will targetelements that do not have any siblings within its parent container. As anexample, let's target all uls, which have only a single list item.First, ask yourself how you would accomplish this task? You could do ul li,but, this would target all list items. The only solution is to use only-of-type.

view plain copy to clipboard print ?1. ul > li:only-of-type {2. font-weight: bold;3. }

view plain copy to clipboard print ?1. ul > li:only-of-type {2. font-weight: bold;3. }

ul > li:only-of-type {font-weight: bold;

}

View DemoCompatibility

IE9+ Firefox 3.5+ Chrome Safari Opera

30. X:first-of-typeThe first-of-type pseudo class allows you to select the first siblings of itstype.A Test

To better understand this, let's have a test. Copy the following mark-up intoyour code editor:view plain copy to clipboard print ?

1. 2.

My paragraph here.
3. 4. List Item 1 5. List Item 2 6. 7. 8.
9. List Item 3 10. List Item 4 11. 12.

view plain copy to clipboard print ?1. 2.

My paragraph here.
3. http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/onlyOfType.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/onlyOfType.html


22/23

4. List Item 1 5. List Item 2 6. 7. 8.

9. List Item 3 10. List Item 4 11. 12.

My paragraph here.

List Item 1 List Item 2

List Item 3 List Item 4

Now, without reading further, try to figure out how to target only "List Item2". When you've figured it out (or given up), read on.Solution 1There are a variety of ways to solve this test. We'll review a handful of them.Let's begin by using first-of-type.view plain copy to clipboard print ?

1. ul:first-of-type > li:nth-child(2) {2. font-weight: bold;3. }

view plain copy to clipboard print ?1. ul:first-of-type > li:nth-child(2) {2. font-weight: bold;3. }

ul:first-of-type > li:nth-child(2) {font-weight: bold;

}This snippet essentially says, "find the first unordered list on the page, then

find only the immediate children, which are list items. Next, filter that downto only the second list item in that set.Solution 2Another option is to use the adjacent selector.view plain copy to clipboard print ?

1. p + ul li:last-child {2. font-weight: bold;3. }


23/23

view plain copy to clipboard print ?1. p + ul li:last-child {2. font-weight: bold;3. }

p + ul li:last-child {

font-weight: bold;}In this scenario, we find the ul that immediately proceeds the p th, and thenfind the very last child of the element.Solution 3We can be as obnoxious or as playful as we want with these selectors.view plain copy to clipboard print ?

1. ul:first-of-type li:nth-last-child(1) {2. font-weight: bold;3. }

view plain copy to clipboard print ?

1. ul:first-of-type li:nth-last-child(1) {2. font-weight: bold;3. }

ul:first-of-type li:nth-last-child(1) {font-weight: bold;

}This time, we grab the first ul on the page, and then find the very first listitem, but starting from the bottom!View DemoCompatibility

IE9+ Firefox 3.5+ Chrome Safari Opera
http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/firstOfType.htmlhttp://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/firstOfType.html

30 selecters cn nh trong css

Documents