First element/selector of enqueued CSS file breaks

Question

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;
}

Answer 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.