Combining CSS Selectors with :first-child - html

Suppose some HTML contains the following div block:
<div id="messages">
<div>
<span>from user</span>
<span>The content of the message</span>
<time datetime="2017-02-15T19:21:20.848Z">10 hours ago</time>
</div>
</div>
How could I style the "from user" text (and just that text) using CSS selectors? I tried to select the first-childelement of the child div of div #messages using #messages>div:first-child, but that didn't work.
EDIT:
There was a small mistake in my syntax.
The proper CSS selector rule should be #messages>div>:first-child rather than what I tried earlier (#messages>div:first-child). The difference is in the > I missed after div.

You're missing a space. You want the span that's the first child, not the div that's the first child.
Finds the first span:
#messages > div :first-child
Finds the first div:
#messages > div:first-child

Are you sure your div is called messages and not members?
What you're looking for is:
#members > div > span:first-of-type
#members > div > span:first-of-type {
color: #f00;
}
<div id="members">
<div>
<span>from user</span>
<span>The content of the message</span>
<time datetime="2017-02-15T19:21:20.848Z">10 hours ago</time>
</div>
</div>
Hope this helps :)

The first-of-type selector would allow you to do that:
div#members span:first-of-type {
color:#000;
}

Related

CSS selection query for just parent content

Say I have the following.
<div class="price">$64 used
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
I only want to select the "$64 used", not the rest in the child spans. How would I do something like this? I have tried selecting like below and none work.
article > .price
article > .price:not(span)
article > div:not(span)
article > div:not(.originally):not(.you-save)
EDIT: For clarification..
const test = document.querySelector('section > div.price');
console.log(test.innerText);
$64 Used$160 New
You save 60%
I only want $64 Used. Is this even possible? I did not make the site, I am trying to scrape this.
div.price
do the work. For me, better is just use
.price.
Just make a small change:
<div class="price">
<span>$64 used</span>
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
CSS:
article > .price > span:not([class]) { color: red; }
This is not how tag:not() works. You can exclude a span tag from taking the style for span tags. But you can not select children this way.
Just apply a style to the div and overwride the properties for the children.
.price {
color: blue;
}
span.originally {
color: green;
}
span.you-save {
color: red;
}
<article>
<div class="price">$64 used
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
</article>

selecting the second <a> tag inside a div element

I want to select just the second a tag (which is the fourth element in the code below) inside a div. My HTML looks like this:
<div class="portItemContainer">
<div class="portItem">
<img src="Images/img.png" alt="" />
<h5>Website Title</h5>
<h6>CREATIVE</h6>
**Visit The Website**
<p>
some text
</p>
</div>
What is the best way to do it?
Thanks
You can use :nth-of-type psuedo selector.
.portItem a:nth-of-type(2){
color:red;
}
Or
You can use adjacent siblings selector
.portItem <h6> + a{
color:red;
}
Demo 1
Demo 2
Here's one way:
.portItem h6 + a {
/*styles here */
}
DEMO
You can use nth-of-type for this
.portItem a:nth-of-type(2) {
color:red;
}
<div class="portItemContainer">
<div class="portItem">
Some Text
<h5>Website Title</h5>
<h6>CREATIVE</h6>
Visit The Website**
<p>
some text
</p>
</div>

css - How do I defind style for this structure

<h3 class="st-module-heading">
<span>
<span>Lastest Products</span>
</span>
</h3>
I want to defind css for span element contain content "Latest Products".
How will do do? Thanks so much.
One option would be to give the span a class:
<h3 class="st-module-heading">
<span>
<span class='myspan'>Lastest Products</span>
</span>
</h3>
Then in CSS, depending on how specific or general you need to be:
.myspan { ... }
/*or*/
span.myspan { ... }
/*or*/
h3.st-module-heading span.myspan { ... }
Without a specific class defined, you would need to do this:
h3.st-module-heading span span { ... }
Which selects the <span> inside the <span> inside <h3 class=st-module-heading>.
But why the extra <span>? In your current code, it is not doing anything. You could just as easily remove it all together unless you are going to need it for something.
Either way, here's a Fiddle to play around with.
the selector should be:
h3.st-module-heading span {
}
html:
<h3 class="st-module-heading">
<span>Lastest Products</span>
</h3>
Assuming that exact structure (the two nested spans), you can use the following css to only select the second nested span:
HTML:
<h3 class="st-module-heading">
<span>
<span>Lastest Products</span>
</span>
</h3>
CSS:
.st-module-heading>span>span {
/* Your css here */
}
The > is the child selector - so .st-module-heading>span>span literally means 'select the span which is directly inside another span, which is directly inside the element with the class st-module-heading'.
You could simply use .st-module-heading span span if need be - but that may not suit if you have additional nested spans.
Link to JS Fiddle.

CSS Line Through not behaving the way I want it too

Ok i have a simple question maybe i am missing something stupid here but I have this little block of html
<div class="span2">
<span class="price flRight salePrice">$11.25 <span>$4.99</span></span>
</div>
With this CSS
.span2 .salePrice{text-decoration:line-through;}
.span2 .salePrice span{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}
But why is the line through on the second span I added important and figured it would be overwritten but it isnt. Why is this not taking?
I have a simple fiddle set up incase it helps http://jsfiddle.net/XJwns/
I am sure i am overlooking something stupid here but please point me to my mistake
Your CSS is telling it to put a line through .salePrice, which is what it is doing, child <span> and all.
The more "standard" way of doing this is:
<span class="price flRight salePrice"><del>$11.25</del> <ins>$4.99</ins></span>
You can then style the old and new prices independently.
Because you can't "cancel" the line-through coming from the parent element. You can, of course, separate them into two siblings spans.
HTML
<div class="span2">
<span class="price flRight salePrice">$11.25</span> <span class="other">$4.99</span>
</div>
CSS
.span2 .salePrice{text-decoration:line-through;}
.span2 .other{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}
See here: http://jsfiddle.net/XJwns/1/
It's because your span's are nested, the outer strikethru overlays your inner span. Unnest them and apply styles separately, so you don't have to use !important:
<div class="span2">
<span class="price flRight">$11.25</span><span class="salePrice">$4.99</span>
</div>
.span2 .price{text-decoration:line-through;}
.span2 .salePrice {color:#cd202c;font-weight:bold;margin-left:5px;display: block;}
http://jsfiddle.net/UBsm8/1/
if you set nested child as inline-block, text-decoration is applied because layout is triggered somehow.
http://jsfiddle.net/XJwns/4/
to have this inline-box to slide under text, you need parent to have a reduced width, this is more like a trick.
.span2 .salePrice {
text-decoration:line-through;
}
.span2 .salePrice span {
color:#cd202c;
font-weight:bold;
margin-left:5px;
text-decoration: none !important;
display:inline-block;
}
.salePrice {
display:inline-block;
width:1em;/* will force to wrap words, boxes in lines */
}

Why use ">" in CSS?

If I want to add styling to all p elements inside of a div, why should I use
div > p{
*style here*
}
as opposed to just
div p{
*style here*
}
furthermore, if I want to use a pseudo class, why would I then choose to use ">"
div > p:first-child{
*style here*
}
instead of
div p:first-child{
*style here*
}
Are there any benefits or drawbacks?
what does that operator do?
It's the direct child, not a recursive match.
CSS
div > p {
}
HTML
<div>
<p>Match</p>
<span>
<p>No match</p>
</span>
</div>
CSS
div p {
}
Markup
<div>
<p>Match</p>
<span>
<p>Match</p>
</span>
</div>
Because it means direct child.
Your second example would match the p in this example
<div>
<header>
<p>
</p>
</header>
</div>
> and (space) are relationship selectors meaning "child" and "descendant" respectively. On top of the semantic differences others have pointed out, a child selector computes faster as it avoids redundant DOM tree traversal on non-matching elements.