CSS

1. CSS Home 2. CSS Introduction 3. CSS Versions 4. CSS Extension 5. Adv.& Disadv of CSS 6. HTML v/s CSS 7. CSS Syntax 8. CSS Selector 9. Inserting CSS file 10. Class 11. ID 12. Div 13. Font 14. Font-size 15. Font-weight 16. Font-style 17. Font-variant 18. Text 19. Text-color 20. Text-decoration 21. Text-transform 22. Text-indent 23. CSS Color 24. Web Safe Color 25. Background-image 26. Background-repeat 27. Background-position 28. Background-attachment 29. Background-size 30. Background-origin 31. CSS Box Model 32. Padding 33. Padding-top 34. Padding-right 35. Padding-bottom 36. Padding-left 37. Margin 38. Margin-top 39. Margin-right 40. Margin-bottom 41. Margin-left 42. Margin Demonstration 43. Border 44. Border-style 45. Different Border-style 46. Border-width 47. Different Border-width 48. Border-color 49. Border-radius 50. Border-collapse 51. Border-spacing 52. Border-image 53. Border-bottom 54. Border-bottom-style 55. Border-bottom-width 56. Border-bottom-color 57. Border-bottom-left-radius 58. Border-bottom-right-radius 59. Border-top 60. Border-top-style 61. Border-top-width 62. Border-top-color 63. Border-top-left-radius 64. Border-top-right-radius 65. Border-right 66. Border-right-style 67. Border-right-width 68. Border-right-color 69. Border-left 70. Border-left-style 71. Border-left-width 72. Border-left-color 73. Ex.Padding,Border,Margin 74. List Style 75. List Style-type 76. List Style-position 77. List Style-image 78. Dimension Properties 79. Width 80. Max-width 81. Min-width 82. Height 83. Max-height 84. Min-height 85. Grouping Selector 86. Nesting Selector 87. Floating 88. Position 89. Pseudo Element 90. First-letter Pseudo 91. First-line-Pseudo 92. Before & After Pseudo 93. Pseudo-class Selector 94. tag 95. Image Gallery 96. Scrollbars 97. Display Property 98. Cursor Property 99. Caption-side Property 100. Transform Property 101. Interview Question and Answer part 1 102. Interview Question and Answer part 2 103. Interview Question and Answer part 3 104. Interview Question and Answer part 4 105. Interview Question and Answer part 5 106. Interview Question and Answer part 6 107. Interview Question and Answer part 7 108. Interview Question and Answer part 8
Pr.Pg Next Pg

The Selectors tutorials

  • We can define selectors in various simple ways based on your comfort:

 

The Type Selectors

  • This is what’s known as a type selector because it instructs the browser to select all elements of a certain type (here, all h1s found in our markup) and render them in a red.

 

h1 { color: #FF0000; }

 

The Universal Selectors

  • Another selector with far-reaching authority, the universal selector, has a much broader scope than the type selector. Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type. its notation is the asterisk, or wildcard symbol, as shown here:

  • This rule renders the content of every element in our document in blue.

 

* { color: #0000FF; }

 

The Descendant Selectors

  • Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

  • This rule begins with a descendant selector, and tells the browser to “select all em elements that are descendants of ul elements."

 

ul em { color: #00FF00; }

 

The Class Selectors

  • We can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

  • Following rule renders the content in blue for every element with class attribute set to .blue in our document.

 

.blue { color: #0000ff; }

 

  • We can make it a bit more particular for example, following rule renders the content in blue for only <h1> elements with class attribute set to blue.

 

h1.blue { color: #0000ff; }

 

The Id Selectors

  • Similar to class selectors, id selectors enable you to select an element based on the id attribute.

  • While the class selector used a period (.), the id selector relies on a hash (#).

  • In this rule, renders the content in red for every element with id attribute set to red in our document.

 

#red { color: ff0000; }

 

  • We can make it a bit more particular. For example, following rule renders the content in red for only <h1> elements with id attribute set to red.

 

h1#red { color: ff0000; }

 

Child Selectors

  • A child selector matches when an element is the child of some element.

  • A child selector is made up of two or more selectors separated by ">".

  • The following rule sets the style of all P elements that are children of BODY:

 

body > P { line-height: 1.5 }

 

  • The following example combines descendant selectors and child selectors:

  • It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.

 

div ol>li p

 

Attribute Selectors

  • The CSS specification has defined attribute selectors. These selectors enable us to not only match on a given element’s class, but on any other attribute it possesses.

  • Denoted by a set of square brackets, attribute selectors can match in any of the ways shown in the following table. Where x is denoted as ‘Attribute’ and y is ‘value’.

 

Attribute Selector Syntax

Result

[x]

Matches when the element has the specified x attribute, regardless of the value of that attribute.

[x=y]

Matches when the element’s x attribute has a value that is exactly y.

[x-=y]

Matches when the value of the element’s x attribute is a space delimited list of words, one of which is exactly y.

[x|=y]

Matches when the value of the element’s x attribute is a hyphen-separated list of words beginning with y.

[x$=y]

Matches all elements with the specified x attribute that END with the specified value y.

[X*=y]

Matches all element/attribute x combinations that have at least one occurrence of the indicated value y as a substring.

[x~=y]

This is a special form of the Attribute Value Selector, allowing a portion of an attribute value to be exactly matched where the portions of the attribute value are separated by spaces.

 

Browser Compatibility:

  • Attribute selectors are not supported by Windows Internet Explorer 5, 5.5 and 6 or Internet Explorer 5 for Mac. They are also not supported by earlier versions of Opera.

 

Example: The following example shows the use of attribute selector, the example below styles all elements with a title attribute
Output:

In above example, the title attribute have red color effect. So in <h1 title> text color will be displayed in red, but in <h1> without title it will not apply any effect to text.

Note: Attribute selection is NOT supported in IE6 and lower. IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified.

 

Example:Program to demonstrate CSS Attribute Selectors
Output:
Pr.Pg border                                              Next Pg