This question already has answers here:
Hide text in html which does not have any html tags [duplicate]
(3 answers)
Targeting text nodes with CSS
(2 answers)
Closed 3 years ago.
I have this situation:
<a href="...">
<span>
<svg>...</svg>
A label
</span>
</a>
How can I select the "A label" text element (being the second child of the span element) in order to style it?
Is is possible somehow?
Set styles for the span element, and unset for its children:
.aSpan{
color: red;
}
.aSpan > *{
color: initial;
}
<a href="#">
<span class="aSpan">
<div>Not this</div>
This
</span>
</a>
Related
This question already has answers here:
How to place a text next to the picture? [closed]
(2 answers)
How to place text and image next to each other? [duplicate]
(2 answers)
How to put a text beside the image?
(5 answers)
How to place Text and an Image next to each other in HTML?
(3 answers)
Closed last year.
I'm trying to add text to the side of an image (more of an oval) in HTML, does anyone know how?
If you put text inside a element it will be on the same line (inline).
<div>
<img src="img.png" />
<span>your text here</span>
<div>
If you'd like to center your text to the left, a simple CSS flex box solution would be:
div {
display: flex;
align-items: center;
}
span {
padding: 15px;
}
<div>
<Img src='' style='float:left' />
<span>Some text</span>
</div>
This question already has answers here:
Hide text in html which does not have any html tags [duplicate]
(3 answers)
Closed 2 years ago.
I want to hide the text..
<div id: "hideen_text"
<a href="http://localhost:3000/photos/12.html">
<img src="https:0f25438da28b758ea0a65d69c188e505.jpg" width="2500" height="1685">
1758345.jpg (I WANT TO HIDE THIS ONE)
</a>
</div>
Any Clue for this? THX
Hiding the complete div would be:
<div style="display: none">
Hiding just the text in the div would be this:
<div>
<a href="http://localhost:3000/photos/12.html">
<img src="https:0f25438da28b758ea0a65d69c188e505.jpg" width="2500" height="1685">
<div style="display:none">1758345.jpg</div>
</a>
</div>
In your CSS, use:
#hideen_text {
display: none;
}
This question already has answers here:
How do I target elements with an attribute that has any value in CSS?
(3 answers)
Closed 2 years ago.
I am trying to apply my custom css style to only one anchor link in the div block.
<div class="grid">
<div class="zoom">
<a href="" class="card" data-entity-type="layout" data-entity-id="3">
<a href="" class="card" data-entity-type="flex" data-entity-id="3">
<a href="" class="card" data-entity-type="slim" data-entity-id="3">
</div>
</div>
// This applies to all links,
<style>
div.grid>.zoom>a.card {width:100px !important;display:block}
</style>
But, I would like to apply above css to only data-entity-type="layout". How to implement ? I don't want to use first:child-nth because the data-entity-type="layout" will not always come first.
You can use attribute selectors. It looks like this:
a[data-entity-type="layout"] {
/* css here */
}
Attribute selectors can be generic or specific.
Also, check this post for more on attribute selectors: How do I target elements with an attribute that has any value in CSS?
This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 3 years ago.
I'm trying to apply specific mobile styling to every second occurrence of the "marketplace_item_container" class shown with the structure below:
.exploreMiddleSection div:nth-of-type(2) {
margin-right: 0;
}
<div class="exploreMiddleSection">
<a href="">
<div class="marketplace_item_container">
<div></div>
</div>
</a>
<a href="">
<div class="marketplace_item_container">
<div></div>
</div>
</a>
<a href="">
<div class="marketplace_item_container">
<div></div>
</div>
</a>
</div>
I'm aware that I can't target specific classes with nth-of-type and only standard html elements so I've tried the above but it's not working.
How can I properly target every second occurrence of "marketplace_item_container" class?
Since the div is the only direct child of a, try this:
.exploreMiddleSection a:nth-of-type(2) .marketplace_item_container {margin-right:0;}
Your selector is not working because the div isn't a direct child of exploreMiddleSection.
.exploreMiddleSection a div:nth-of-type(2) {margin-right:0;}
This question already has answers here:
Multiple descendant children selector with css [duplicate]
(3 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
I have a following DOM:
<div class="someclass">
<p>
<p>
<span></span>
</p>
</p>
<div>
<p>
<span></span>
</p>
</div>
</div>
I need to apply a stylesheet to span tags which are under the div with someclass class, but NOT to span tags which are under nested div.
There might be any other hierarchy of tags among them and span tags might be nested among any tags (except div). And using > will not help.
Can you give me a selector to select them?
You can use immediate child > to accomplish this. You can also use the * selector along with negation to accomplish non-div nesting look-ups.
.someclass > p,
.someclass *:not(div) p {
background-color: yellow;
}
<div class="someclass">
<p>Highlight me</p>
<section><p>Also hightlight me</section>
<section>
<section>
<p>Also hightlight me
</section>
</section>
<div>
<p>Do not highlight me</p>
</div>
</div>