Child themes CSS priority problems without using !important

Try enqueuing your child theme’s CSS like so:

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Notice a few things:

1) PHP_INT_MAX as priority so that this runs last

2) get_stylesheet_directory_uri() vs. get_template_directory_uri() which will point to the child theme’s template folder instead of the parents.

I added a subfolder there, as well /styles/ because I keep my CSS in a subfolder of my theme normally.

3) followed by array( 'parent-style' ) to make the child CSS have the parent CSS as a dependency, which has the effect of putting the parent theme first in the head and the child theme CSS following it. Because of that, whatever also appears in the child theme that is already in the parent theme will overwrite the parent theme’s version.

Related Posts:

  1. How do I remove specific styles from the parent theme css using the child theme css?
  2. Do I only need to import style.css for a child theme?
  3. How Can I Use A Child Theme Effectively When Parent’s CSS Is Located in a ‘CSS folder’?
  4. Disable child theme css on certain pages
  5. some things in child theme css not overriding parent
  6. Why do WordPress default themes specify fonts in so many places?
  7. CSS in child theme not getting loaded
  8. TwentyTwelve versioning
  9. How to change Parent Themes in Child Theme CSS
  10. Duplicate and alter sidebar for Twenty Eleven
  11. How can I remove css from a child theme?
  12. Is it better to put CSS in additional CSS or in Child theme styles.css [closed]
  13. Font Awesome wp_enqueue_style
  14. Different ways to load child theme css
  15. WordPress Twenty Fourteen Theme Sidebar
  16. Importing changes to Child Theme
  17. Load in wp admin assets from child theme
  18. Help with child theme enqueuing additional css files
  19. How to integrate my HTML and javascript into my child theme
  20. why this media query is not working / not loading when I put it in child theme?
  21. Trying to figure out why my child theme is trying to access a file that doesn’t exist
  22. Child theme CSS not applying to element
  23. Correct Way To Make Changes To A WordPress Theme
  24. Child theme stylesheet not always overriding “index”
  25. Why is this jquery / java script code not working in mobile / in devices?
  26. Child Theme CSS not showing at all
  27. Why is my child theme style.css not found (404) in the front-end? [closed]
  28. How to sync the style in the visual editor with the style of a child theme?
  29. Remove CSS Attribute by Overriding CSS in Child Theme
  30. CSS getting injected into index from somewhere after theme/custom CSS is loaded, overriding all of my CSS [closed]
  31. child theme appears again when I put the header with parent name.
  32. All of my custom Bootstrap styles are not working in my child theme!
  33. Earlier stylesheet not overriding later one
  34. Free theme and css/bootstrap.css is not overridden in the child theme
  35. Child Theme style.css changes aren’t showing. Parent “style-less.css” over rides it, and won’t update
  36. Css will not display in webpage, after adding it in style.css in child theme
  37. How to enqueue stylesheets in child-theme functions.php?
  38. Dequeing Parent Fontawesome Deques Parent Styles
  39. WordPress childtheme not loading any CSS/SCSS
  40. My Child Theme CSS Isn’t Working
  41. all of a sudden my child theme style.css is being ignored? Its been working fine for months?
  42. Change WP Child theme CSS for WP Bootstrap Starter Theme
  43. Font size decreases when child theme is created from parent theme?
  44. Change style of Twenty Seventeen child theme
  45. CSS in child theme to replace !important in parent theme
  46. Why are my parent styles loading after my child styles?
  47. 100% Width Footer – Custom Child Theme
  48. Browser stacks different versions of style.css
  49. Can’t override CSS with child theme
  50. Add Custom CSS Class in Child Theme [closed]
  51. How to change btn color in Bootstrap
  52. force footer on bottom on pages with little content
  53. Dynamically change color to lighter or darker by percentage CSS
  54. How do I right align div elements?
  55. What is the difference between “screen” and “only screen” in media queries?
  56. How to have an anim gif on a link and play it on hover and reset
  57. Using font awesome in codepen
  58. using media queries with LESS
  59. How can I apply styles to multiple classes at once?
  60. How can I center

Leave a Comment