Display different css relevant to user - css

Question

I'm always using this method to display relevant css for the user, but I'd like to know if there was a better way to achieve this.
<?php
//MySQL request
$data = $request->fetch();
?>
<div
class="if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
echo "divLoggedInUser";
}
else {
echo "divLoggedInUser";
  }
} else{
echo "divNotLoggedIn";
}"
id="<?php echo $data['id']; ?>">
<!--class is used for relavant css, id for javascript element selector -->
</div>
This is not such a big problem in this example, but it becomes a mess when you have a lot of code.
I'd like to know if there's a equivalent way to do this?
Something in css like this would be so greatfull:
.div::loggedIn
.div::notLoggedIn

Answer 1

There isn't, either way you have to generate some code which will allow you to determine in CSS whether you style an element for logged in user or not.
If you haven't done that already, put your code in function for a better read:
<?php
function getCssUserClass() {
if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
return "loggedIn";
} else {
return "notLoggedIn";
}
} else {
return "loggedIn";
}
}
?>
<div class="<?= getCssUserClass() ?>"><span class="username">Frank</span></div>
Then you can style your div and all elements inside it accordingly:
.loggedIn {
}
.loggedIn span.username {
color: #FF0000;
}
.notLoggedIn {
}
notLoggedIn span.username {
color: #999;
}

Answer 2

Why not present a different CSS file based on if the user is logged in and then assign generic classes to the divs that should be hidden or not.
Create 2 CSS files, loggedinusers.css and notloggedinusers.css. For your loggedinusers.css
div.showToLoggedInUser {
display:block;
}
and in your notoggedinusers.css
div.showToLoggedInUser {
display:none;
}
Then user your logged in logic to add the appropriate CSS file
<?php
$css_file = "notloggedinuser.css";
if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
$css_file = "loggedinuser.css";
}
?>
<link rel="stylesheet" href="<?PHP echo $css_file; ?> />

Answer 3

You could set the loggedIn/notLoggedIn class on the body element, then add CSS rules that need to reference that setting like this:
div.anyOtherClass {
/* default styling */
}
body.loggedIn div.anyOtherClass{
/* logged-in styling */
}
body.loggedIn div.anyOtherClass{
/* logged-out styling */
}