html - How to style specific child tags in css
I am styling chat layout and got stuck at the point . This is my
snippet
href="https://jsfiddle.net/9ce1d8or/" rel="nofollow
noreferrer">https://jsfiddle.net/9ce1d8or/
class="snippet" data-lang="js" data-hide="false" data-console="true"
data-babel="false">
class="snippet-code-css lang-css prettyprint-override">
#chatbox
{
background: #f7f7f7;
padding:
10px;
}
#chatbox #chatmessages {
max-height:
400px;
overflow: auto;
}
#chatbox
#chatmessages .messages {
margin-bottom: 20px;
}
#chatbox
#chatmessages .messages .message {
padding: 10px;
border-radius:
25px;
}
#chatbox #chatmessages .messages .message.message-received
{
background: green;
margin: 5px 0;
max-width: 40%;
}
#chatbox #chatmessages .messages
.message.message-sent {
float: right;
margin: 5px 0;
background: #ccc;
max-width:
40%;
}
.clearfix::after {
content:
'';
display: block;
clear:
both;
} >
class="message message-received">Hello
class="message message-sent">Hello mrs
class="clearfix">
Hello mrs
Hello
Hello
Hello
Hello mrs
class="clearfix">
Hello mrs
Hello
Hello
I
want to style every first .message-received which is child of
.messages element. Tried all pseudo selectors but nothing
worked as expected. I have tried
.messages
.message-received::first-of-type,
::nth-of-type(2)
Is the markup style correct for what
i want to style? or i am doing wrong with css? Your suggestions will be very
helpful.
The href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child" rel="nofollow
noreferrer">first-child selector (like the name is
suggesting) selects the first child of an element - in your case that would be the
element of class .product.
There is no first child of
class .message-received in your markup, thatswhy that selector
doesn't work for your case.
To select the first
element of a specific class, you would do a little trick. First style all elements of
that class with the first class styles and then revert the styles for all siblings,
using the href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors"
rel="nofollow noreferrer">adjacent sibling selector
~:
class="lang-css prettyprint-override">
#chatbox #chatmessages .messages
.message-received {
background: red;
}
#chatbox
#chatmessages .messages .message-received ~ .message-received {
background:
green;
}
This
way, the first element of the class will be
styled:
data-hide="false" data-console="true" data-babel="false">
class="snippet-code">
#chatbox {
background:
#f7f7f7;
padding: 10px;
}
#chatbox
#chatmessages {
max-height: 400px;
overflow:
auto;
}
#chatbox #chatmessages .messages
{
margin-bottom: 20px;
}
#chatbox
#chatmessages .messages .message {
padding: 10px;
border-radius:
25px;
}
#chatbox #chatmessages .messages
.message.message-received {
background: red;
margin: 5px
0;
max-width: 40%;
}
#chatbox #chatmessages
.messages .message.message-sent {
float: right;
margin: 5px
0;
background: #ccc;
max-width:
40%;
}
.clearfix::after {
content:
'';
display: block;
clear:
both;
}
#chatbox #chatmessages .messages
.message-received ~ .message-received {
background:
green;
}
class="messages">
Hello
class="message message-sent">Hello mrs
class="clearfix">
Hello mrs
Hello
Hello
No comments:
Post a Comment