Standard CSS

Pop Up Tool Tip

HTML

<div class="couponcode">First Link
    <span class="coupontooltip"><a href="http://www.outwater.com">click below</a> to continue and some more text</span>
</div>

<div class="couponcode">Second Link
    <span class="coupontooltip"> Content 2</span>
</div>
<div class="menu">
    <ul>
        <li> one</li>
        <li class="two"> one</li>
        <li class="two"> one</li>
        
    </ul>
</div>
  

CSS

.couponcode:hover .coupontooltip {
    display: block;
   
}


.coupontooltip {
    display: none;
    background: teal;
    margin-left: 8px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
    line-height:26px;
}

.couponcode {
    margin:100px;
}
 .menu > ul {
     list-style-type:none;
    display:none;
}
 .menu:hover ul > li {
     display:inline-block;
 }

Tabs

HTML

<div class="tabs">
    
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>
       
       <div class="content">
           Tab 1
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>
       
       <div class="content">
           Tab2
       </div> 
   </div>
    
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>
     
       <div class="content">
           tab3
       </div> 
   </div>
    
</div>
===CSS===

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: white; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: teal;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Attribute Selectors

Css [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute  
 a[target] {
    background-color: yellow;
}

CSS [attribute=value] Selector
The [attribute=value] selector is used to select elements with a specified attribute and value.


  The following example selects all <a> elements with a target="_blank" attribute:
  
 a[target="_blank"] { 
    background-color: yellow;
}

CSS [attribute~=value] Selector
The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"

[title~="flower"] {
    border: 5px solid yellow;
}

The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".

CSS [attribute|=value] Selector
The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!

 [class|="top"] {
    background: yellow;
}

CSS [attribute^=value] Selector
he [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value does not have to be a whole word!

[class^="top"] {
    background: yellow;
}

CSS [attribute$=value] Selector
The [attribute$=value] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with "test":

Note: The value does not have to be a whole word!

[class$="test"] {
    background: yellow;
}

CSS [attribute*=value] Selector
The [attribute*=value] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains "te":

Note: The value does not have to be a whole word!

[class*="te"] {
    background: yellow;
}

Styling Forms
The attribute selectors can be useful for styling forms without class or ID:

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

---

Back To Top- Home - Category