How do I apply/target CSS to a specific user role or roles?

If you’re looking for a way to add the roles into the body class, like here:

<body class=" ... role-administrator role-jedi role-knight ... ">

then you could try the following: 

add_filter( 'body_class', function( $classes )
{
    if( is_user_logged_in() )
    {       
        $classes = array_merge( 
            (array) $classes,
            array_map( 
                function( $class )
                {
                    return 'role-' . $class;    // Here we prepend the 'role-' string
                }, 
                (array) wp_get_current_user()->roles 
            )
        );
    }
    return $classes;
} );

Related Posts:

  1. If post by specific role different css to everyone
  2. Enable specific CSS Code for Visitors and specific Roles
  3. Change color of audio player depending on user role
  4. How to insert the current user’s role into the body class in the admin backend
  5. check the first login for specific roles
  6. Gutenberg Editor: display error with a combination of transform and background-attachment:fixed
  7. How to include backend buttons css on frontend?
  8. How to use WordPress 3.8 back-end CSS in front-end?
  9. What’s the difference between SCSS and Sass?
  10. What is a user agent stylesheet?
  11. CSS opacity only to background color, not the text on it?
  12. How do I center floated elements?
  13. How to set up fixed width for ?
  14. Make div scrollable
  15. How do I center an h1 in the body
  16. Can you set a border opacity in CSS?
  17. Any way to limit border length?
  18. Why “Inline-block” doesn’t work properly in this CSS?
  19. How to fade an image with CSS without opacity?
  20. Flushing footer to bottom of the page, twitter bootstrap
  21. CSS transition fade in
  22. Is it possible to define constants in CSS?
  23. Responsive media query not working in Google Chrome
  24. Contain an image within a div?
  25. Failed to decode downloaded font
  26. How to make fixed header table inside scrollable div?
  27. CSS fill remaining width
  28. TinyMCE: adding CSS to format dropdown
  29. How to conditionally enqueue a stylesheet only for a certain page(s)?
  30. Is there a quick way to remove inline css from all posts?
  31. How to remove CSS file in the header using WordPress functions?
  32. Get list of registered or enqued styles? looking for filters or actions
  33. wp_get_archives() – Get CSS selector for current month
  34. Do I only need to import style.css for a child theme?
  35. Disable child theme css on certain pages
  36. How to load a css file in one page only?
  37. How to add custom fonts in WordPress site
  38. Handling URLs in WordPress application
  39. Extending content width with twentyfourteen theme
  40. Override load-styles.php with admin screen css
  41. CSS file not registering through add_action
  42. Custom Admin CSS styles to style media uploader?
  43. getting url in wp_enqueue_style
  44. Gutenberg Additional CSS Class without modifying theme?
  45. Eliminate render-blocking JavaScript and CSS in above-the-fold content
  46. Unable to load CSS file (HTTP 403)
  47. Dynamic sidebar nav with current page highlighting
  48. how to setup content on a static frontpage with css and xhtml
  49. wp_enqueue_style – CSS Not loading – ERR_TOO_MANY_REDIRECTS [closed]
  50. Help with child theme enqueuing additional css files
  51. Why does my caroussel gallery do this in responsive? [CSS] [closed]
  52. Website CSS not loading [closed]
  53. Custom styles dropdown in TinyMCE editor – not working with headings
  54. Load CSS in footer, like your can with JS?
  55. Correct Way To Make Changes To A WordPress Theme
  56. Move Sidebar from Above Content To Below When Responsive [closed]
  57. wordpress css file
  58. Implementing a simple slider in code?
  59. CSS – Initial HTML Margin Issue On WordPress Site
  60. Cannot set property ‘className’ of null at setThemeFromCookie
  61. Target h1 on single post page [closed]
  62. Can not find css directory in header
  63. custom header navigation has odd spacing [closed]
  64. jQuery UI Theme that aligns perfectly with the admin UI
  65. Error in node.js webpack-cli failed to load config, typeError: ManifestPlugin is not a constructor
  66. dynamic css file for admin / backend and get_option results in Uncaught Error: Call to undefined function get_option()
  67. How can I force Dynamic CSS via ACF values to update on page load?
  68. WordPress backend is loading without style
  69. Append style tag in head while shortcode runs
  70. Add a unique body class for every admin page (including trash)
  71. Why would a theme writer put their CSS in one long string? [closed]
  72. Show product information on right side [closed]
  73. How to integrate Bootstrap Grid System in WordPress
  74. Show/Hide Div for Login Mask
  75. Target admin page body via CSS class
  76. Hide Overflow on a Specific WordPress Template
  77. Google Chrome CSS issues [closed]
  78. ACF Gut block broke wordpress default style?
  79. Scroll code block instead of wrapping text
  80. Divi CSS Flex/Margin Error
  81. How to enqueue stylesheets in child-theme functions.php?
  82. Change class value using CSS
  83. Dequeue CSS of the Parent Theme
  84. How to make video responsive in full height on mobile?
  85. div:before appearing in front of the block
  86. How to replace wordpress css or js file with external file?
  87. Unable to properly load WordPress Admin page
  88. Change style of Twenty Seventeen child theme
  89. Why is css not applied on paginated query?
  90. Disable CSS specific page
  91. Editing anchor style in main navigation bar
  92. My contact form is not being responsive
  93. I can’t change the background color of a specific page
  94. how to make social media buttons start only from under a photo/post?
  95. What can cause JavaScript and CSS files to be minified?
  96. 100% Width Footer – Custom Child Theme
  97. Twenty thirteen theme change the height of menu sub items
  98. Bullet List Indentation not showing up in the wordpress
  99. I want to Hide CSS ID for specific user roles
  100. Busting Browser Cache when updating stylesheet of WordPress website