Pseudo-classes and pseudo-elements
Featured
Reply
Category Archives: CSS
Pseudo-class :last-child not working
Pseudo-classe li:last-child not working if not in direct child.
:last-child NOT working
<ul> <a href=""><li>first child</li></a> <a href=""><li>middle child</li></a> <a href=""><li>last child</li></a> </ul>
:last-child working
<ul> <li><a href="">first child</a></li> <li><a href="">middle child</a></li> <li><a href="">last child</a></li> </ul>
Column
.content-archive-links-single {
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-moz-column-gap: 10px; /* Firefox */
column-gap: 10px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px outset #ff00ff; /* Firefox */
column-rule: 4px outset #ff00ff;
}Resource:
Ordered list, start number
<ol start="3">
<li>Google Chrome</li>
<li>Internet Explorer</li>
<li>Mozilla Firefox</li>
<li>Safari</li>
<li>Opera</li>
</ol>Resource: https://css-tricks.com/almanac/properties/l/list-style/
Unordered list (ul) custom list style
How to control list style:
- type
- color
- size
- position
#sidebar li:before {
content: "» ";
color: #999; /* or whatever color you prefer */
font-size: 26px;
vertical-align: text-top;}Folded corner
.content-article {
position: relative;
width: 100%;
overflow: hidden;}
.content-article:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-width: 16px 16px 0 0;
border-style: solid;
border-color: #dae2ea #889bae #dae2ea #889bae;
background: #dae2ea;}Resource: http://nicolasgallagher.com/pure-css-folded-corner-effect/
Transparentcy, opacity, alpha filter
opacity: 0.9; filter: alpha(opacity=90); /* For IE8 and earlier */
Text background color
Background color for multi line text.
NB. Pay attention to line-height
margin: 0px 10px; /* adjust left/right according to box-shadow */ display: inline; background-color: #ebebeb; box-shadow: 10px 0 0 #ebebeb, -10px 0 0 #ebebeb; box-decoration-break: clone;
CSS3 transition examples and explained
Disable plugin CSS
If, a plugin is linking to external/loading CSS, do the following.
In the plugin folder search for “wp_enqueue_style”. The first parameter is the function name.
wp_enqueue_style( 'tablepress-default'
In funtions.php add:
/**
* Disable style sheet
*/
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'tablepress-default' );
}