Exclude certain object to the css styling

Original

1
2
3
4
5
6
7
8
9
10
...
<style>
  td span { border: 1px solid; display: block; }
</style>
...
<table>
  <tr><td><span class="foo">This want to be excluded from Internal Style</span></td></tr>
  <tr><td><span>This want to be follow the Internal Style</span></td></tr>
</table>
...

Let say I want to exclude the span with the class foo, just change to

1
td span:not(.foo) { border: 1px solid; display: block; }
Reference:

Add a comma to li except for the last 1

1
2
3
4
5
6
7
<ul>
    <li>alpha</li>
    <li>beta</li>
    <li>lambda</li>
    <li>kapa</li>
    <li>gamma</li>
</ul>

The desire output is alpha, beta, lambda, kapa, gamma. Add a comma to every li expect for the last item

1
2
3
4
5
6
ul {
    line-height: 0;
}
li:not(:last-child):after {
    content: ', ';
}
Reference:

CSS3 odd & even

Take a table rows as example

1
2
3
4
5
6
table tr:nth-child(even) {
    background-color: #dfdfdf;
}
table tr:nth-child(odd) {
    background-color: #b38a2f;
}
Reference:

Position a div on top of img

1
2
3
4
<div id="container">
    <img src="http://example.com/img.jpg">
    <div id="inner">This is my div</div>div>
</img>div>

Set the container position to relative, and the inner div to absolute.

1
2
3
4
5
6
7
8
9
10
11
12
13
#container {
    position: relative;    
}

#inner {
   position: absolute;
   top: 10px; // position y
   left: 10px; // position x
    
   padding: 5px;
   background-color: white;
   border: 2px solid red;
}
Reference:

Background image 100%

1
2
3
4
5
6
7
#wrapper {
    background: url('../img/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
Reference:

Add border to text

Add white border with 2px width

1
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
Reference:

Set 100% height by CSS only

Set the height of a div relative to body

1
2
3
#slideshow {
    height: 100vh;
}
Reference:

Google map zoom control not showing properly

1
2
3
.gmnoprint img {
    max-width: none; 
}
Reference:

Long text word wrap issue

Add this zero-width space character to anywhere of the string

1
&#8203;

Another better solution would be implemented in CSS

1
2
3
4
5
6
7
8
9
10
 -ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
Reference:

Hide scrollbar

1
2
3
4
5
6
7
.container {
    scrollbar-width: none; // for firefox
}
.container::-webkit-scrollbar { // for chrome/safari
    width: 0;
    height: 0;
}

Enforce image height according to width

This can be done by setting the aspect ratio

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <a href="#">
        <img src="/path/to/img1.jpg">
    </a>
    <a href="#">
        <img src="/path/to/img2.jpg">
    </a>
    <a href="#">
        <img src="/path/to/img3.jpg">
    </a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  display: flex;

  a {
    flex-grow: 1;
    flex-basis: 0;
    --aspect-ratio: 1; // <---- SET THIS

    img {
      width: 100%;
      height: 100%; // <----- set the height to 100%
      object-fit: cover;
    }
  }
}
Reference:

Bootstrap

Set the width for navbar to collapse

In this example shows the navbar will collapse when the width is 1200px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

NOTE: For Bootstrap 3.1

Reference:

jQuery UI

Make autocomplete result scrollable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* highlight results */
.ui-autocomplete span.hl_results {
    background-color: #ffff66;
}
 
/* loading - the AJAX indicator */
.ui-autocomplete-loading {
    background: white url('../img/ui-anim_basic_16x16.gif') right center no-repeat;
}
 
/* scroll results */
.ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding for vertical scrollbar */
    padding-right: 5px;
}
 
.ui-autocomplete li {
    font-size: 16px;
}
 
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
    height: 250px;
}
Reference: