I am trying to make a comment process in HTML, CSS, js, and PHP.
I have an element named .view_replies in the nested class.
If I make a sibling of its parent element and want to target it(i.e.sibling) I use the has pseudo selector but it does not work.
Can anyone tell me where I am wrong?
Following are my HTML codes:
<section class="comment_main_container">
<!-- Total comments -->
<div class="total_comments">
<p>Comments</p>
<p>6</p>
</div>
<!-- Add comment -->
<form action="../partials/comment_handle" method="POST">
<div class="add_comment">
<div class="user_dp"><img src="../img/users_img/black-soil.jpg" alt=""></div>
<div class="comment">
<input type="text" name="comment" placeholder="Elaborate your concern">
<button class="comm_btn" type="submit">comment</button>
</div>
</div>
</form>
<!-- Comments -->
<div class="comment_container">
<!-- Replies -->
<div class="comment_box">
<div class="comment_card">
<div class="user_details">
<div class="user_dp">
<img src="../img/users_img/black-soil.jpg" alt="">
</div>
<div class="user_name">
<h3>@hello viewer</h3>
</div>
</div>
<p>comment7</p>
<div class="comment_footer">
<div class="like">
<button type="submit">
<i class="fa-regular fa-thumbs-up"></i>
</button>
<p>50</p>
</div>
<div class="dislike">
<button type="submit">
<i class="fa-regular fa-thumbs-down"></i>
</button>
<p>5</p>
</div>
<button type="submit" class="cReplies">
<p>reply</p>
</button>
<button type="submit" class="dReplies">
<p class="view_replies active">view replies</p>
<p>3</p>
</button>
<div class="display-reply">
<form action="../partials/comment_reply_handle?cid=7" method="POST">
<textarea name="comment_reply" id="" class="text-reply"></textarea>
<button class="reply_btn" type="submit">reply</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Reply -->
<div class="comment_box repliesView">
<div class="comment_card">
<div class="user_details">
<div class="user_dp">
<img src="../img/users_img/black-soil.jpg" alt="">
</div>
<div class="user_name">
<h3>@hello viewer</h3>
</div>
</div>
<p>reply</p>
<div class="comment_footer">
<div class="like">
<button type="submit">
<i class="fa-regular fa-thumbs-up"></i>
</button>
<p>50</p>
</div>
<div class="dislike">
<button type="submit">
<i class="fa-regular fa-thumbs-down"></i>
</button>
<p>5</p>
</div>
<button type="submit" class="dReplies">
<p>reply</p>
</button>
<div class="display-reply">
<form action="../partials/comment_reply_handle?cid=7" method="POST">
<textarea name="comment_reply" id="" class="text-reply"></textarea>
<button class="reply_btn" type="submit">reply</button>
</form>
</div>
</div>
</div>
</div>
<!-- Reply -->
<div class="comment_box repliesView">
<div class="comment_card">
<div class="user_details">
<div class="user_dp">
<img src="../img/users_img/black-soil.jpg" alt="">
</div>
<div class="user_name">
<h3>@hello viewer</h3>
</div>
</div>
<p>reply4</p>
<div class="comment_footer">
<div class="like">
<button type="submit">
<i class="fa-regular fa-thumbs-up"></i>
</button>
<p>50</p>
</div>
<div class="dislike">
<button type="submit">
<i class="fa-regular fa-thumbs-down"></i>
</button>
<p>5</p>
</div>
<button type="submit" class="dReplies">
<p>reply</p>
</button>
<div class="display-reply">
<form action="../partials/comment_reply_handle?cid=7" method="POST">
<textarea name="comment_reply" id="" class="text-reply"></textarea>
<button class="reply_btn" type="submit">reply</button>
</form>
</div>
</div>
</div>
</div>
<!-- Reply -->
<div class="comment_box repliesView">
<div class="comment_card">
<div class="user_details">
<div class="user_dp">
<img src="../img/users_img/black-soil.jpg" alt="">
</div>
<div class="user_name">
<h3>@hello viewer</h3>
</div>
</div>
<p>reply5</p>
<div class="comment_footer">
<div class="like">
<button type="submit">
<i class="fa-regular fa-thumbs-up"></i>
</button>
<p>50</p>
</div>
<div class="dislike">
<button type="submit">
<i class="fa-regular fa-thumbs-down"></i>
</button>
<p>5</p>
</div>
<button type="submit" class="dReplies">
<p>reply</p>
</button>
<div class="display-reply">
<form action="../partials/comment_reply_handle?cid=7" method="POST">
<textarea name="comment_reply" id="" class="text-reply"></textarea>
<button class="reply_btn" type="submit">reply</button>
</form>
</div>
</div>
</div>
</div>
<!-- Comments -->
<div class="comment_container">
<!-- Replies -->
<div class="comment_box">
<div class="comment_card">
<div class="user_details">
<div class="user_dp">
<img src="../img/users_img/black-soil.jpg" alt="">
</div>
<div class="user_name">
<h3>@hello viewer</h3>
</div>
</div>
<p>comment6</p>
<div class="comment_footer">
<div class="like">
<button type="submit">
<i class="fa-regular fa-thumbs-up"></i>
</button>
<p>50</p>
</div>
<div class="dislike">
<button type="submit">
<i class="fa-regular fa-thumbs-down"></i>
</button>
<p>5</p>
</div>
<button type="submit" class="cReplies">
<p>reply</p>
</button>
<button type="submit" class="dReplies">
<p class="view_replies">view replies</p>
<p>0</p>
</button>
<div class="display-reply">
<form action="../partials/comment_reply_handle?cid=6" method="POST">
<textarea name="comment_reply" id="" class="text-reply"></textarea>
<button class="reply_btn" type="submit">reply</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Comments -->
<div class="comment_container">
<!-- Replies -->
<div class="comment_box">
<div class="comment_card">
<div class="user_details">
<div class="user_dp">
<img src="../img/users_img/black-soil.jpg" alt="">
</div>
<div class="user_name">
<h3>@hello viewer</h3>
</div>
</div>
<p>comment5</p>
<div class="comment_footer">
<div class="like">
<button type="submit">
<i class="fa-regular fa-thumbs-up"></i>
</button>
<p>50</p>
</div>
<div class="dislike">
<button type="submit">
<i class="fa-regular fa-thumbs-down"></i>
</button>
<p>5</p>
</div>
<button type="submit" class="cReplies">
<p>reply</p>
</button>
<button type="submit" class="dReplies">
<p class="view_replies">view replies</p>
<p>0</p>
</button>
<div class="display-reply">
<form action="../partials/comment_reply_handle?cid=5" method="POST">
<textarea name="comment_reply" id="" class="text-reply"></textarea>
<button class="reply_btn" type="submit">reply</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Following are my CSS codes:
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
.comment_main_container{
width: 100%;
padding: 80px 16.80%;
display: flex;
flex-direction: column;
gap: 10px;
}
.comment_main_container .total_comments{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
font-weight: 600;
}
.comment_main_container .add_comment{
/* border: 1px solid red; */
width: 100%;
height: auto;
gap: 10px;
display: flex;
margin-bottom: 25px;
}
.comment_main_container .add_comment .user_dp{
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
display: flex;
}
.comment_main_container .add_comment .user_dp img{
width: 100%;
height: 100%;
object-fit: cover;
display: flex;
}
.comment_main_container .add_comment .comment{
width: calc(100% - 50px - 10px);
height: 50px;
display: flex;
}
.comment_main_container .add_comment .comment input{
width: 100%;
height: 100%;
border: 0;
border-bottom: 1px solid #e9e9e9;
outline: none;
font-size: 18px;
}
.comment_main_container .add_comment .comment .comm_btn{
cursor: pointer;
outline: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 30px;
background-color: rgb(7 178 232 / 11%);
text-transform: capitalize;
font-size: 15px;
color: rgb(51 51 51 / 80%);
}
.comment_container:not(:first-child) {
margin-top: 1rem;
}
.comment_box{
width: 100%;
height: auto;
position: relative;
/* display: flex; */
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-left: 10px;
}
.comment_box:not(:first-child) {
width: calc(100% - 1rem);
}
/* .comment_box:not(:first-child){
display: none;
} */
/* .revel.active .comment_box:not(:first-child){
display: flex;
} */
.revel.active ~ .comment_box{
background-color: #000;
}
.comment_main_container .comment_box::before{
content: "";
background-color: rgb(170, 170, 170);
position: absolute;
min-height: 100%;
width: .5px;
left: 0;
}
.comment_main_container .comment_box:not(:first-child){
margin-left: 1rem;
}
.comment_main_container .comment_box .comment_card{
/* border: 2px solid red; */
/* width: calc(100% - 20px); */
width: 100%;
height: 100%;
gap: 10px;
display: flex;
flex-direction: column;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
padding: 20px;
background-color: #fff;
border: 1px solid rgb(0 0 0 / 12%);
border-radius: 5px;
}
.comment_main_container .comment_box .comment_card .user_details{
/* border: 2px solid darkgreen; */
width: 100%;
height: 100%;
display: flex;
gap: 10px;
}
.comment_main_container .comment_box .comment_card .user_details .user_dp{
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
display: flex;
}
.comment_main_container .comment_box .comment_card .user_details .user_dp img{
width: 100%;
height: 100%;
object-fit: cover;
display: flex;
}
.comment_main_container .comment_box .comment_card .user_details .user_name{
display: flex;
width: calc(100% - 50px - 10px);
height: auto;
align-items: center;
}
.comment_main_container .comment_box .comment_card .user_details .user_name h3{
text-transform: lowercase;
font-size: 18px;
}
.comment_main_container .comment_box .comment_card .comment_footer{
/* border: 2px solid darkgreen; */
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 20px;
}
.comment_main_container .comment_box .comment_card .comment_footer .like,
.comment_main_container .comment_box .comment_card .comment_footer .dislike{
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.comment_main_container .comment_box .comment_card .comment_footer .like button,
.comment_main_container .comment_box .comment_card .comment_footer .dislike button{
background-color: transparent;
cursor: pointer;
outline: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.comment_main_container .comment_box .comment_card .comment_footer .like button:hover{
color: #006BB7;
}
.comment_main_container .comment_box .comment_card .comment_footer .dislike button:hover{
color: #000;
}
.comment_main_container .comment_box .comment_card .comment_footer .like button i,
.comment_main_container .comment_box .comment_card .comment_footer .dislike button i{
font-size: 20px;
}
.comment_main_container .comment_box .comment_card .comment_footer .like p,
.comment_main_container .comment_box .comment_card .comment_footer .dislike p{
font-size: 15px;
}
.comment_main_container .comment_box .comment_card .comment_footer .reply{
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.comment_main_container .comment_box .comment_card .comment_footer button{
display: flex;
gap: 5px;
background-color: transparent;
cursor: pointer;
outline: none;
border: none;
}
.comment_main_container .comment_box .comment_card .comment_footer button p{
font-size: 15px;
font-weight: bold;
text-transform: capitalize;
}
.comment_main_container .comment_box .comment_card .comment_footer button p:nth-child(1):hover{
color: #006BB7;
}
/* .comment_main_container .comment_box .comment_card .comment_footer .reply p{
font-size: 15px;
} */
.display-reply{
width: 100%;
height: 20px;
display: none;
}
.display-reply form{
width: 100%;
height: 100%;
display: flex;
gap: 10px;
}
.display-reply .text-reply{
display: flex;
width: 100%;
height: 100%;
border: none;
border-bottom: 1px solid grey;
outline: none;
}
.comment_main_container .comment_box .comment_card .comment_footer .cReplies.active ~ .display-reply{
display: flex;
}
.comment_main_container .comment_box .comment_card .comment_footer .cReplies.active ~ .display-reply .reply_btn{
cursor: pointer;
outline: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
text-transform: capitalize;
font-size: 15px;
font-weight: 600;
color: #000;
}
.comment_main_container .comment_box .comment_card .comment_footer .cReplies.active ~ .display-reply .reply_btn:hover{
color: #006BB7;
}
.comment_main_container > .repliesView {
display: none;
}
.comment_main_container .comment_container:has(> .view_replies.active) ~ .repliesView{
display: flex;
}
Following are my JS codes for .active class:
const viewReplies = document.querySelectorAll(".view_replies");
viewReplies.forEach(vwRply => {
vwRply.addEventListener("click", () => {
vwRply.classList.toggle("active");
});
});
All game is that first I make .comment_box.repliesView display:none; I have the target
.comment_main_container .comment_box .comment_card .comment_footer button p.view_replies
and make a function onclick for adding an active class then again target to .comment_box.repliesView and make it display:flex;
For this, I have written the CSS:
.comment_main_container > .repliesView {
display: none;
}
And JS for this is as follows:
const viewReplies = document.querySelectorAll(".view_replies");
viewReplies.forEach(vwRply => {
vwRply.addEventListener("click", () => {
vwRply.classList.toggle("active");
});
});