Pure CSS code implementation of various Balloons Bubble dialog box effect code parsing

HTML code:

 





Effect:


substring matching Property selector

Here's a more advanced selector module, which is published after CSS2, and contains more of the partial value property selectors. According to the specification, it should be called "substring matching attribute selector".

Many modern browsers support these selectors, including IE7.

The following table is a brief summary of these selectors:


 
 
 
  
 
   
 
    
type
 
    
Description
 
   
 
   
 
    
[abc^= "Def"]
 
    
Select all elements with the ABC attribute value beginning with "Def"
 
   
 
   
 
    
[abc$= "Def"]
 
    
Select all elements with the ABC attribute value ending with "def"
 
   
 
   
 
    
[abc*= "Def"]
 
    
Select all elements of the ABC attribute value that contain the substring "def"
 
   
 
  
 

 
 


P.important
The selector now matches all p elements that have the class attribute containing important, but none of the other types of elements match, regardless of whether or not this class attribute is present. The selector p.important is interpreted as: "All paragraphs whose class property value is important." Because the H1 element is not a paragraph, the selector of the rule does not match, so the H1 element does not become red text.
If you do want to specify a different style for the H1 element, you can use the selector h1.important:
p.important {color:red;}
h1.important {color:blue;}



Combining Element Selectors
Class selectors can be used in conjunction with element selectors.
For example, you might want only paragraphs to appear in red text:
p.important {color:red;}
The selector now matches all p elements that have the class attribute containing important, but none of the other types of elements match, regardless of whether or not this class attribute is present. The selector p.important is interpreted as: "All paragraphs whose class property value is important." Because the H1 element is not a paragraph, the selector of the rule does not match, so the H1 element does not become red text.
If you do want to specify a different style for the H1 element, you can use the selector h1.important:
p.important {color:red;}
h1.important {color:blue;}


combining Element Selectors

Class selectors can be used in conjunction with element selectors.

For example, you might want only paragraphs to appear in red text:

p.important {color:red;}
 
The selector now matches all p elements that have the class attribute containing important, but none of the other types of elements match, regardless of whether or not this class attribute is present. The selector p.important is interpreted as: "All paragraphs whose class property value is important." Because the H1 element is not a paragraph, the selector of the rule does not match, so the H1 element does not become red text.

If you do want to specify a different style for the H1 element, you can use the selector h1.important:

p.important {color:red;}
h1.important {color:blue;}
 
Try it yourself.







The HTML code is as follows:


 

 

 

Effect:








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

Combining Element Selectors
Class selectors can be used in conjunction with element selectors.
For example, you might want only paragraphs to appear in red text:
p.important {color:red;} Note: no spaces p.important
The selector now matches all p elements that have the class attribute containing important, but none of the other types of elements match, regardless of whether or not this class attribute is present. The selector p.important is interpreted as: "All paragraphs whose class property value is important." Because the H1 element is not a paragraph, the selector of the rule does not match, so the H1 element does not become red text.
If you do want to specify a different style for the H1 element, you can use the selector h1.important:
p.important {color:red;}
h1.important {color:blue;}

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


Substring Matching Property Selector
Here's a more advanced selector module, which is published after CSS2, and contains more of the partial value property selectors. According to the specification, it should be called "substring matching attribute selector".
Many modern browsers support these selectors, including IE7.
The following table is a brief summary of these selectors:
Type description
[abc^= "Def"] Select all elements with the ABC attribute value beginning with "Def"
[abc$= "Def"] Select all elements with the ABC attribute value ending with "def"
[abc*= "Def"] Select all elements of the ABC attribute value that contain the substring "def"

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

descendant Selector

 Select elements based on context 
 We can define descendant selectors to create rules that make these rules work in some document structures, but not in other structures. 
 For example, if you want to apply a style only to the EM element in the H1 element, you can write this: 
 H1 em {color:red;} The 
 above rule turns the text of the EM element as the descendant of the H1 element into red. Other EM text, such as EM in a paragraph or block reference, is not checked by this rule: 
  <p >this is a <em>important</em> paragraph.</p>