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

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>

Related

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>

If specific CSS class-combination is present, change CSS of another class

I also want to change the background-color of "three" to "lightblue", but only if the class-combination "one current" exists on the page. Note: "three" can't get an additional class. I know, you can do this with JavaScript, but is there also a native CSS solution?
Here's my example:
<!DOCTYPE html>
<html>
<head>
<style>
.one.current {background-color: lightblue;}
</style>
</head>
<body>
<header>
<p class="one current">The first paragraph.</p>
</header>
<main>
<p class="two">The second paragraph.</p>
<p class="three">The third paragraph.</p>
<p class="four">The fourth paragraph.</p>
</main>
</body>
</html>
In your case you could use .one.current in the <header>
Then style .three with:
.one.current ~ main .three
And the <p> element inside the header with:
.one.current p
Documentation about the ~ operator: general sibling selector (MDN).
If you can set class for header element instead of p element inside it, you can address the paragraph inside the sibling element using the following combination of selectors:
<!DOCTYPE html>
<html>
<head>
<style>
.one.current p {background-color: lightblue;}
.one.current + main > .three {background-color: lightblue;}
</style>
</head>
<body>
<header class="one current">
<p>The first paragraph.</p>
</header>
<main>
<p class="two">The second paragraph.</p>
<p class="three">The third paragraph.</p>
<p class="four">The fourth paragraph.</p>
</main>
</body>
</html>

Add content if the element is not empty

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

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>

# sign in CSS selectors

Some CSS selectors have # in front of them, what does that mean?
It's the ID selector, a fundamental feature of the CSS standard. It matches the HTML element with the given ID, according to the id attribute (assuming a conforming document, of course). See the W3C Selectors spec for more.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#my-div {
color: #f00;
}
</style>
</head>
<body>
<div id="my-div">This text will be red.</div>
<div id="another-div">This text will not be red.</div>
</body>
</html>
You may also have seen the # notation used in a URL fragment identifier to refer to named anchors (<a name="some-anchor"></a>). These can also point to elements with certain IDs in your page, just like named anchors, and I gather that it's why CSS uses the same notation for selecting IDs.
The selector, #foo will match any element with an ID attribute with a value of "foo".
<style type='text/css'>
#foo { color: red; }
</style>
<div id='foo'>red text</div>
In CSS,
# is Mention for ID Selector
. is Mention for Class Selector
You might also have seen something like
div#myDiv {}
Which means "a DIV-tag with ID set to 'myDiv'"
It selects based on the id of html element...
http://www.w3.org/TR/CSS2/selector.html#id-selectors
<style>
#myDiv { }
</style>
<div id="myDiv">
</div>