How to find second <p> element in a <div> You could use the nth-child selector, set to find the second child. This will select all <p> elements that are the second child of their parent: [php]p:nth-child(2) { background-color: lightblue; }[/php]
So I have run an audit on a website in chrome and google says I should use passive event listeners. I have looked through the code and identified it’s coming from the wordpress emoji integration: [code lang=”js”]/*<![CDATA[*/window._wpemojiSettings={"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72×72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/mysite.com.au\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=14BexZMoP1gqvSbLZSfYigjUvfcXkroScK"}};!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b===c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);/*]]>*/</script> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3Eimg.wp-smiley%2Cimg.emoji%7Bdisplay%3Ainline%20!important%3Bborder%3Anone%20!important%3Bbox-shadow%3Anone%20!important%3Bheight%3A1em%20!important%3Bwidth%3A1em%20!important%3Bmargin%3A0%20.07em%20!important%3Bvertical-align%3A-0.1em%20!important%3Bbackground%3Anone%20!important%3Bpadding%3A0%20!important%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" … Read more
Explanation: Here, the main part is to use overflow: hidden; on the element, and than am creating a virtual element using an :after pseudo with content property, and am positioning it absolute to the parent element which am setting to relative [php]<h2>Hello World</h2>[/php] [css]h2 { font-size: 20px; font-family: Arial; position: relative; overflow: hidden; } h2:after { display: inline-block; content: ""; height: 4px; background: … Read more
You can set CSS color and background color to your custom order status displayed in admin order list this way: [php]add_action(‘admin_head’, ‘styling_admin_order_list’ ); function styling_admin_order_list() { global $pagenow, $post; if( $pagenow != ‘edit.php’) return; // Exit if( get_post_type($post->ID) != ‘shop_order’ ) return; // Exit // HERE we set your custom status $order_status = ‘Dispatched’; // … Read more
The reason why your image is resizing which is because it is fluid. You have two ways to do it: 1. Either give a fixed dimension to your image using CSS like: [css].carousel-inner > .item > img { width:640px; height:360px; }[/css] 2. A second way to can do this: [css].carousel { width:640px; height:360px; }[/css] [custom-related-posts … Read more
First you need to write your script. In your theme folder create a folder called something like ‘js’. Create a file in that folder for your javascript. E.g. your-script.js. Add your jQuery script to that file (you don’t need <script> tags in a .js file). Here is an example of how your jQuery script (in wp-content/themes/your-theme/js/your-scrript.js) might … Read more
WordPress uses jQuery in noConflict mode by default. You need to reference it using jQuery as the variable name, not $, e.g. use [sourcecode language=”plain”]jQuery(document);[/sourcecode] [custom-related-posts title=”You may Also Like:” none_text=”None found” order_by=”title” order=”ASC”]
By default when you enqueue jQuery in WordPress you must use jQuery, and $ is not used (this is for compatibility with other libraries). Your solution of wrapping it in function will work fine, or you can load jQuery some other way (but that’s probably not a good idea in WordPress). If you must use document.ready, you can actually pass $ into … Read more
