Title: CSS prioritisation
Last modified: August 24, 2016

---

# CSS prioritisation

 *  Resolved [seanmyers](https://wordpress.org/support/users/seanmyers/)
 * (@seanmyers)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/)
 * Hi,
 * I am wondering if anyone can tell me the priority of CSS within the Customizr
   theme/WordPress in general. I have created a child theme for customizr to make
   changes to the styling of the website, this was working great for most parts,
   however some things would be ignored and only appear if I chose to edit CSS under
   the appearance tab of wp-admin. This styling would then work.
    I’d much rather
   have everything within the child theme, mainly due to the fact it can be seen
   whilst loading each page.
 * Can anyone tell me why this might be happening?
 * Thanks,
    Sean

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Thread Starter [seanmyers](https://wordpress.org/support/users/seanmyers/)
 * (@seanmyers)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963441)
 * Okay, so the problem just seems to be getting worse. It appears that anything
   I add in the child is getting completely ignored, I’ve check for strayed comments
   etc. and can’t see anything.
 * Has anyone ever had this issue before?
 * Thanks,
    Sean
 *  [Rocco Aliberti](https://wordpress.org/support/users/d4z_c0nf/)
 * (@d4z_c0nf)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963444)
 * Hi,
    you have to activate your child-theme and use it as your main theme.
 *  Thread Starter [seanmyers](https://wordpress.org/support/users/seanmyers/)
 * (@seanmyers)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963459)
 * Hi,
    Child theme is active, maybe I should explain in more detail.
 * My child theme stylesheet currently contains these styles:
 *     ```
       /*
       Theme Name: Function
       Version: 1.0
       Description: A child theme of Customizr
       Template: customizr
       Author: Administrator
       */
       /* Your awesome customization starts here */
   
       .tc-header{
       	border-bottom: 5px solid #736357;
       }
   
       /* Adjust Menu colors - Normal */
       .navbar .nav > li > a, .navbar .nav > li > a:first-letter {
       	color: #736357;
       }
       /* Adjust Menu colors - Hover */
       .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
       	color: #736357;
       	text-decoration: underline;
       }
       /* Adjust Menu colors - Active */
       .navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
       .navbar .nav > li.current-menu-item > a,
       .navbar .nav > li.current-menu-ancestor > a,
       .navbar .nav > li.current-menu-item > a:first-letter,
       .navbar .nav > li.current-menu-ancestor > a:first-letter {
       	color: #736357;
       	text-decoration: underline;
       }
   
       .social-block a{
       	color: #736357;
       	top:5px;
       }
   
       .social-block a:hover{
       	color: #736357;
       }
   
       .my-social-menu-search {
       	display: inline-block;
       }
   
       .my-social-menu-search .search-field {
       	width: auto;
       margin-top: 1%;
       }
   
       #menu-page-navigation-2{
       	color: #736357;
       }
       .login-float-login a:hover, .login-float-register a:hover, .login-float-login a:focus, .login-float-register a:focus{
       	color: #736357;
       	text-decoration: underline;
       }
   
       .login-float-login a:active, .login-float-register a:active {
       	color: #736357;
       	text-decoration: underline;
       }
   
       .login-float-login a, .login-float-register a {
       	color: #736357;
       	font-weight: normal;
       }
   
       .login-float-container{
       	border-top:none;
       	height:35px;
       	width:150px;
       	min-height:30px;
       	height:auto;
       	min-width:150px;
       	z-index:100;
       	top:1%;
       	text-align:center;
       	font-size:17px;
       	padding-top:15px;
       	position: absolute;
           	right: 3%;
       	color: #736357;
       	font-weight: normal;
       }
       #prices{
       	width:50%;
       	margin-left:25%;
       }
       table, th, td{
       	border: 1px solid black;
       	border-collapse: collapse;
       }
   
       .navbar .nav > li > a {
       	padding:0px;
       	margin-left:20px;
       }
   
       .navbar div > ul.nav > .menu-item:first-child a{
       	margin-left:0px;
       }
   
       /*Stop the display of the Search button */
       .my-social-menu-search .search-submit {
           display: none;
       }
       /* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
       .my-social-menu-search .search-form .screen-reader-text {
           position: absolute;
           left: -9999px;
           overflow: hidden;
       }
   
       // Style the search input textbox
       .my-social-menu-search .search-field {
           background: white;
           color: #736357;
       border: none;
           -webkit-box-shadow:    none;
           -moz-box-shadow:       none;
           box-shadow:            none;
           cursor: pointer;
           height: 26px;
           margin: 2px 0 2px 0;
           padding: 0 0 0 36px;
           -webkit-transition: width 400ms ease;
           -moz-transition:    width 400ms ease;
           -o-transition:      width 400ms ease;
           transition:         width 400ms ease;
       	width: 500px;
       }
   
       .my-social-menu-search .search-field {
           color: #736357;
           /* change the colour above if you are working with a dark navbar background */
           border: 2px solid #736357;
           cursor: text;
           outline: 0;
           -webkit-box-shadow: none;
           -moz-box-shadow:    none;
           box-shadow:         none;
           margin: 0;
       }
   
       /* Expand the search box when you click it */
       .my-social-menu-search .search-field:active,
       .my-social-menu-search .search-field:focus{
        color: #736357;
           /* change the colour above if you are working with a dark navbar background
           }
   
       /* Add a magnifying glass background */
       .my-social-menu-search .search-form:before {
           font-family: 'genericons';
           content: '\f400';
       width: 5px;
       position: absolute; /* this is the key to put it visually inside the search field */
           font-size: 19px;
           font-weight: bold;
           padding-top: 5px; /* tune this vertical alignment inside the search field, as needed */
           padding-left: 5px; /* tune this horizontal alignment inside the search field, as needed */
       	color: #736357;
       	z-index: 100;
       }
   
       .navbar-inner .social-block {
       margin: 3px;
       }
   
       .uneditable-input:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus {
           border-color: #736357;
       }
   
       button, input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"], label, select {
           cursor: auto;
   
       .uneditable-input:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus {
       	border-color: #736357;
       }
   
       //make appointment
   
       .appointments-wrapper {
       	width: 50%;
       	background-color: white;
       }
   
       .cleanlogin-container{
       	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
       }
       ```
   
 * However sometimes when adding new styling, I found this particularly with background
   changes and a few other bits, it would not appear. I therefore out these changes
   into the ‘edit CSS’ tab under appearance, rather than the child stylesheet. So
   far this is what is under the ‘Edit CSS’ section as it wasn’t working within 
   the child:
 *     ```
       /*
       Welcome to Custom CSS!
   
       CSS (Cascading Style Sheets) is a kind of code that tells the browser how
       to render a web page. You may delete these comments and get started with
       your customizations.
   
       By default, your stylesheet will be loaded after the theme stylesheets,
       which means that your rules can take precedence and override the theme CSS
       rules. Just write here what you want to change, you don't need to copy all
       your theme's stylesheet content.
       */
       //new
   
       .colophon {
       	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
       	background-color: #cccccc;
       }
   
       .tc-header {
       	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
       	background-color: #cccccc;
       }
   
       body {
       	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-8.png");
       	background-color: #cccccc;
       }
   
       footer#footer .colophon .social-block a {
       	color: #736357;
       }
   
       footer#footer {
       	border-width: 50px 0 0;
       	border-style: solid;
       	-moz-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
       	-webkit-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
       /* Safari 3.1-5 */
       	-o-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
       /* Opera 11-12.1 */
       	border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
       	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
       	background-color: #cccccc;
       }
   
       .entry-content {
       	margin: auto;
       	width: 75%;
       }
   
       .cleanlogin-container {
       	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
       }
   
       input[type="submit"] {
       	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
       }
   
       .cleanlogin-container.cleanlogin-full-width {
       	max-width: 450px;
       }
   
       #main-wrapper {
       /* default fallback */
       	background: rgb(255,255,255) transparent;
       /* nice browsers */
       	background: rgba(255,255,255,0.6);
       /* IE 6/7 */
       	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#99FFFFFF);
       /* IE8 */
       	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#99FFFFFF);
       	border: 2px solid #736357;
       	-webkit-border-radius: 5px;
       	-moz-border-radius: 5px;
       	border-radius: 5px;
       	padding: 5px;
       }
   
       .my-social-menu-search {
       	display: inline-block;
       }
   
       .navbar-inner .social-block {
       	margin: 0;
       }
       ```
   
 * The website is [here](http://bramcroft.co.uk).
    I believe you helped me with 
   the search bar earlier today, now playing up a little with width etc. in the 
   child stylesheet.
 * Any insight would be greatly helpful,
    Sean
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963463)
 * There might be other problems, but you are missing a closing bracket here:
 *     ```
       button, input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"], label, select {
           cursor: auto;
       ```
   
 * That invalidates all subsequent CSS.
 * Try validating your CSS here:
 * [https://jigsaw.w3.org/css-validator/#validate_by_input](https://jigsaw.w3.org/css-validator/#validate_by_input)
 *  [Rocco Aliberti](https://wordpress.org/support/users/d4z_c0nf/)
 * (@d4z_c0nf)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963467)
 * Well,
    when I wrote that you should active your child theme was ’cause I went
   on your page, and found the child-theme wasn’t active. But maybe I was wrong..
   Anyway: `// Style the search input textbox` this isn’t a valid css comment Here
   you have an unclosed comment:
 *     ```
       .my-social-menu-search .search-field:active,
       .my-social-menu-search .search-field:focus{
        color: #736357;
           /* change the colour above if you are working with a dark navbar background
           }
       ```
   
 * This isn’t a valid css comment:
    `//make appointment`
 * plus the error WPyogi kindly suggested above
 * 😉
 *  Thread Starter [seanmyers](https://wordpress.org/support/users/seanmyers/)
 * (@seanmyers)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963470)
 * That’s a great spot, thank you! Unfortunately it doesn’t fix the issue with the
   child CSS not working for all aspects. I will take your advice and attempt to
   validate it, thank you,
    Sean
 *  Thread Starter [seanmyers](https://wordpress.org/support/users/seanmyers/)
 * (@seanmyers)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963484)
 * Between the two of you, you have managed to fix this issue. Thank you so much
   for all the help and support, it is truly appreciated!
 * What have I learned from this? Use validators before asking questions!
 * Thank you again,
    Sean
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963501)
 * >  Use validators before asking questions!
 * LOL – yeah, we’ve all learned that more than once! You’re welcome too.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘CSS prioritisation’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

## Tags

 * [child](https://wordpress.org/support/topic-tag/child/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 8 replies
 * 3 participants
 * Last reply from: [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/css-prioritisation/#post-5963501)
 * Status: resolved