How to change css in php file - php

Question

I am using post navigation for my blog. For this portion i wrote some css. It's working fine. But the problem is for the very latest post , it's showing blank space for next post link. Same thing is happened with oldest post, it's showing again bank space for previous post link.
I add code snippet for this portion. Can i anyone suggest how can i modify my css for this portion. Following code is embedded in php file.
<div class="row justify-content-center">
<div class="sewl-more-posts">
<div class="previous-post">
<?php If(previous_post_link()){?>
<span class="post-control-link">Previous Article</span>
<span class="post-name"><?php previous_post_link(); ?></span>
<?php } ?>
</div>
<div class="next-post">
<?php If(next_post_link()){?>
<span class="post-control-link">Next Article</span>
<span class="post-name"><?php next_post_link(); ?></span>
<?php } ?>
</div>
</div>
</div>

Answer 1

First, output the divs only if they'll have content:
<div class="sewl-more-posts">
<?php if (previous_post_link()){?>
<div class="previous-post">
<span class="post-control-link">Previous Article</span>
<span class="post-name"><?php previous_post_link(); ?></span>
</div>
<?php } ?>
<?php if (next_post_link()){?>
<div class="next-post">
<span class="post-control-link">Next Article</span>
<span class="post-name"><?php next_post_link(); ?></span>
</div>
<?php } ?>
</div>
This way, if the previous-post or next-post div is missing, you'll be able to target the remaining one with the :only-child pseudo class:
.sewl-more-posts > div:only-child {
text-align: center;
}

Answer 2

You cannot do this with php once the page is generated client-side, therefore you have to use javascript (for example):
onclick = documet.getElementById('the id you have').style.property = "blue";