0

I have successfully enqueued a CSS file using wp_enqueue_style. I have verified that the CSS I am using for all my settings and selectors is correct. Indeed, all styling is applied except for the settings specified by first selector in the file. Its settings are never read/applied to its corresponding element.

I have confirmed the issue is confined to the selector being at the beginning of the file, and not my actual CSS with a simple test: I merely add an additional selector above my code and then the code that wasn't working, when it was the first selector, suddenly is applied. Similarly if I have two selectors, and swap their positions so that the first is now second and the second is now first, the first one (that wasn't working before) works and the second (that was working before) no longer does.

First selector not applied

<style> 

#IntendedfirstSelector {  
   color: blue;       /* this won't work*/
}

#IntendedSecondSelector { 
   color: red;      /* this works*/
}

</style>

Inserting filler selector restores functionality

<style> 

#uselessSelector {  
   color: white;  /* inserted filler selector; now none of my needed code is the called by the 1st selector */
}

#IntendedfirstSelector {  
   color: blue;  /* with the filler inserted above, the same code now works*/
}

#IntendedSecondSelector {   /* this still works*/
   color: red;
}

</style>

It seems to me that something strange is going on with how the browser or WP is interpreting the file. When I inspect the link in the head, things look ok to me

<link rel="stylesheet" id="themeName-child-extra-style" href="http://example.com/wp-content/themes/themeName-child/my_css_file.css?ver=4.7" type="text/css" media="all">

In my current pseudo-working version, where the first element breaks, first I have the tag <style>...</style> wrapping the code. To get the first element to work, I have tried:

  1. removing the style tags;
  2. adding type="text/css" inside the <style> tag;
  3. removing initial spaces;
  4. adding initial spaces;
  5. removing intial carriage returns;
  6. inserting initial carriage returns;
  7. commenting out the definitions of DB_COLLATE and DB_CHARSET in wp-config.php (found here).

I can't figure out what the problem is because my CSS, as long as it is not the first element, does work.

The only odd thing that I think might be causing it could be that I am making this stylesheet dependent on the theme's main stylesheet (style.css), in order to load the small file it after the main file (WP defaults to having the main file load last). I have no clue if the dependency/ordering could cause such an issue or not, but I thought I should mention it.

This is my code for enqueing (as @prosti requested):

function themeName_child_enqueue_styles() {
    wp_enqueue_style( 'themeName-style', get_template_directory_uri() . '/style.css' ); //parent stylesheet
    wp_enqueue_style( 'themeName-child-style', get_stylesheet_directory_uri() . '/style.css' );  //child stylesheet
    wp_add_inline_style( 'themeName-child-style', some_inline_css() ); //some inline style I seem to have no problems with 
    wp_enqueue_style( 'themeName-child-extra-style',  get_stylesheet_directory_uri() . '/my_css_file.css', 'themeName-child-style'); // the file with the broken selector and the dependency on the child-theme's stylesheet;
}
1

Have you checked this document? https://codex.wordpress.org/Child_Themes

I meant this in particular:

If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. (See a more detailed discussion on Stack Exchange.) The complete (recommended) example becomes:


Please provide the lines how you enqueued the styles in your child theme.


PS: You don't need to use <styles> inside of your CSS files.

  • thanks for looking into this, I provided my enqueueing function. :) – CoderScissorhands Dec 31 '16 at 18:02
  • I don't see you set the parent style array( $parent_style ) as in that codex. – prosti Dec 31 '16 at 18:09
  • That was a bit longer than an hour, sorry ..I implemented the changes by adding a dependency to the child theme and including the parent's version number: nothing changed. The first element in my final stylesheet still doesn't work. Next idea? – CoderScissorhands Jan 1 '17 at 15:10
  • If you did that as you said in your last comment, you have the concept of loading CSS files according to the codex. So what you have now should be the parent CSS loads first, and then the child theme CSS. Is this the case? – prosti Jan 1 '17 at 15:27
  • 1
    BTW, my friend, I think that you do not need to have <style> inside your CSS file and this is the problem. – prosti Jan 1 '17 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.