Add content if the element is not empty - html

I want to add content (with :before selector) only if span has value.
If the span is empty I don't want to add content with :before selector.
How can I do it with css?
<!DOCTYPE html>
<html>
<head>
<style>
span.b::before {
content: "\2022"
}
.span.b:empty {}
</style>
</head>
<body>
<div class="a">
<span class="b">AAA</span>
</div>
</body>
</html>

You were close. You're looking for:
span.b:not(:empty)::before {
content:"\2022"
}
span.b:not(:empty)::before {
content:"\2022"
}
<div class="a">
<span class="b">AAA</span>
</div>
<div class="a">
<span class="b"></span>
</div>

You can also use a code like this
span.b::before {
content: "\2022";
}
span.b:empty::before {
content: inherit;
}
You can use the property inherit to give the default styles. Because it's normally inherit. But if the browser don't know the value inherit for any propery, you can use it likes initial

Related

How to select a class in css that includes a symbol?

Hello and here is my example
.*test{color:blue;}
<p class="*test">Hi</p>
`
But it doesn't work that way
I neeed to select all classes with the *test and includes the symbol but it just doesn't work
Please Help 👉👈
You need to escape it
.\*test {
color: blue;
}
<p class="*test">Hi</p>
The [attribute*=value] selector matches every element whose attribute value containing a specified value including a symbol.
Example :
*[class*="*symbol"] {
background: #ffff00;
}
<!DOCTYPE html>
<html>
<head>
<style>
*[class*="*symbol"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_symbol">The first div element.</div>
<div class="second">The second div element.</div>
<div class="*symbol">The symbol.</div>
<p class="*symbol">The symbol paragraph.</p>
</body>
</html>

CSS add pointer style only if a div has text

In the following situation, how can add cursor:pointer to only the second div which contains the text Cursor pointer required here.
The div with class="x95qze" remains the same. The div or text within it is added/removed using javascript.
cursor:pointer is required only when there is plain text inside div class="x95qze
<!DOCTYPE html>
<html>
<head>
<title>Cursor</title>
</head>
<body>
<div class="x95qze">
<div class="RiYDI">No cursor pointer required here</div>
</div>
<div class="x95qze">Cursor pointer required here.</div>
</body>
</html>
CSS:
.x95qze {
border:1px solid black;
padding:5px;
}
.x95qze .RiYDI {
border:1px solid black;
width:50%
}
Try this:
HTML
<div class="x95qze"><span id="js-output">Cursor pointer required here.</span></div>
CSS
#js-output {
cursor:pointer;
display:inline-block;
}
if you know the text you can use pure javascript includes
First find the text
const sentence = 'The quick brown fox jumps over the lazy dog.';
const word = 'fox';
console.log(`The word "${word}" ${sentence.includes(word) ? 'is' : 'is not'} in the sentence`);
// expected output: "The word "fox" is in the sentence"
if (sentence.includes(word)) {
let element = document.querySelector('.x95qze);
element.setAttribute("style", "cursor:pointer;");
}
more info MDN
Jquery has a text selector called :contains(text).
After updating content, i call a function which iterates over .x95qze classed tags and adds cursored class to tags those has no children.
And in css for cursored class I add a rule of cursor:pointer.
function checkCursors(){
$('.x95qze:contains(Cursor)').each(function(i, container) {
$(container).toggleClass('cursored', $(container).children().length == 0);
});
}
// After content updated
checkCursors();
.x95qze.cursored { cursor:pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Cursor</title>
</head>
<body>
<div class="x95qze">
<div class="RiYDI">No cursor pointer required here</div>
</div>
<div class="x95qze">Cursor pointer required here.</div>
</body>
</html>

CSS target <section> if it has any #id [duplicate]

I have a lot of the same elements on a page that is not under my direct control (so i can't change the HTML). This might look like this:
<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
...
<div class="item">This text should be black</div>
I want to write a css rule that targets all elements with class item that have an id.
I can do
#brand_one, #brand_two, ... { color:red; }
But the id's go into the hundreds, so that's not an option.
What i'm looking for is a rule something like this:
.item[id] { color:red; } / .item# { color:red; }
I know this is possible in Javascript, but does this exist in CSS?
Yes, this is possible using CSS attribute selectors:
.item[id] {
/* any elements with a class .item and an ID attribute */
}
Yes, this exists. In you case you should use:
div[id*="brand"] { color: red; }
This selects all divs with an id that contains brand and colors it red.
Edit: You can also, to make sure it only targets ids with brand_ in the start of the id-name, use the following:
div[id^="brand_"] { color: red; }
This will avoid that other divs in the future that have an id that contains brand will also be targeted.
Edit 2: To make it even MORE specific, you can target only ids that are following the class="item":
div[id^="brand_"].item { color: red; }
This targets all divs with brand_ in the beginning of the id and have item as a class.
You can try using css attribute selector:
div.item {
color: black;
}
div.item[id^='brand_'] {
color: red;
}
div.code {
text-transform: uppercase;
}
div.code[id^='brand_'] {
color: blue;
}
<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
<div class="item">This text should be black</div>
<div class="code">This text should be in caps</div>
<div class="code" id="brand_three">This text should be in caps and blue color</div>
Here, [id^='brand_'] refers to id starting with brand_. There are also $(ends with) and *(contains) expressions.
We can use
.item[id^="brand"]{
color:red;
}
^= indicates "starts with". So we can search id which starts with "brand".
CSS [attribute^=value] Selector
The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.
So in your case ;
<style>
[id^="brand"] {
color:red;
}
<style>
Refer to:
w3schools
Try it yourself
Here's another way to do it.
<style type="text/css">
.item:not([id='']) {
color:red;
}
</style>
But it assumes you can set id='':
<div class="item" id="">This text should be black</div>
Not sure how this would work when id is unspecified as in your case.

Keep DIV to have isolated style definition

I use metro-ui-css for my webapp, the look and feel is great. Now I load a word document (with its own style) into a DIV. After word document is loaded, it will override some metro-ui-css style rules, so that the look and feel becomes unexpectedly...
To simplify the problem, I create a demo below. After clicking the button, I want only text below to be blue, not all of them. The question is besides using <iframe>, is it possible to isolate the style definition?
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`
);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
I understand you can't modify the html and you must change the function so the div has red text. You can do that by changing in <style>div{color:red;}</style>
function insert() {
$('#fragment').html(`
<html>
<head>
<style>div{color:red;}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
Since CSS :scope is experimental and the loaded content is out of control, you could do like this, where you give the outer most body a unique id and use that to get highest possible specificity for your controlled elements.
Also, when target your controlled elements, you need to make sure to use highest specificty possible, so those rules doesn't override the loaded one's, or get overridden by the uncontrolled content rules.
As you see when click the button, its text gets red but not the wrapped elements.
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
#outer-body > .wrapper * {
color: blue
}
#outer-body > .wrapper .other {
color: lime;
margin: 10px 0;
}
#outer-body > #fragment {
margin-top:10px;
border:1px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="outer-body">
<div class="wrapper">
<p>OUTER CONTENT SHOULD BE BLUE</p>
<div class="other">
Other text target with its class
</div>
</div>
<button onclick="insert()">Load into DIV</button>
<div id="fragment">PLACEHOLDER</div>
</body>

How to hide particular A element inside DIV

I have the following HTML
<div class="divclass">
<a id="some_random_id_which_changes_everytime" class="otherclass" title="View Site">View Site</a>
</div>
I want to set display:none for this element "View Site". I tried the following codes but they didn't work. Please note I don't want to hide this whole div but just this particular A element inside it.
Code 1
.divClass [text='View Site']
{
display:none;
}
Code 2
.divClass a[text='View Site']
{
display:none;
}
Try the below.
div.divclass a[title="View Site"]
{
display:none;
}
WORKING DEMO
Alternatively, you can also declare values for a[title="View Site"] to hide without keeping the div inheritance.
For Instance,
a[title="View Site"]
{
display:none;
}
WORKING DEMO - 2
If you want to compare the difference, you can check the below demo.
WORKING DEMO - FOR COMPARISON BETWEEN MULTIPLE TITLES
Another way to hide using jquery ...
<div class="divclass">
<a id="site" class="otherclass" title="View Site">View Site</a>
</div>
and js ..
$('#site').hide();
Working Example
use this
.otherclass
{
display:none;
}
or
.divclass a.otherclass
{
display:none;
}
What Nathan said, or:
div.divclass a[title="View Site"]
{
visibility:hidden;
}
This version will hide what you need but still take up space
use the "child" selector:
<!doctype html>
<html>
<head>
<title>
Bla!
</title>
<style type='text/css'>
div.divclass >a {display:none} /* any a that is direct child of div class divclass */
</style>
</head>
<body>
<div class="divclass">
data inside div before link
<a id="some_random_id_which_changes_everytime" class="otherclass" title="View Site">View Site</a>
data inside div after link
</div>
</body>
</html>