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>
Related
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>
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>
In my code below my id and classes are not being shown on my page (i.e the color green etc), how do I solve this?
They were both working before until I added the div and now it does not work.
<!doctype html>
<head>
<title> CSS </title>
<style type="text/css">
<!-- Note the . which refers to a class -->
.large{
font-size:300%;
}
<!-- Note the # which refers to a single id -->
#green{
color:green;
}
.underline{
text-decoration:underline;
}
.bold{
font-weight:bold;
}
div {
background-color:blue;
}
</style>
</head>
<body>
<h1> Example heading </h1>
<div>
<p class="large"> This is a bit of text </p>
</div>
<p id="green" class="large"> A bit more... </p>
<!-- Note how it's possible to refer to 3 classes at the one time, seperated by spaces -->
<p> The third <span class= "underline large bold">word</span> in this paragraph is underlined. </p>
</body>
</html>
It's a silly problem, took me a while to understand it because I was looking for something else!
The problem are the comments. In CSS you comment with
/* comment */
and not <!-- --> like in HTML. Just modify the comments and it should works without problems.
More info: http://www.w3schools.com/css/css_syntax.asp
How to select the only 2nd <p> of 2nd <div>tag?
Is there any hierarchy we can associate in CSS tags ?
Below is code:
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(2) {
background: #ff0000;
}
</style>
</head>
<body>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
</body>
</html>
Regarding the widest browser support you can use + selector combined with :first-child.
div + div p:first-child + p {color: red;}
https://jsfiddle.net/vkm2zuaq/
OR using :nth-child:
div:nth-child(2) p:nth-child(2) {color: red;}
https://jsfiddle.net/vkm2zuaq/1/
nth-child will do the job, try following code
div:nth-child(2) p:nth-child(2){
/*---- css code-------*/
}
div:nth-child(2) p:nth-child(2){
color:red;
}
also check out this Post by Chris Coyer - it covers all answers to this topic:
CSS Tricks - how nth work
My HTML is this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="stylesheet.css">
<head>
</head>
<body>
<p>hiya</p>
<h1>this is h1</h1>
<h2>this is h2</h2>
</body>
</html>
My stylsheet.css is this:
:not(p)
{
color:#ff0000;
}
Yet everything is red, including <p>. I've tried Firefox 20, Internet Explorer 10, and Chrome. It doesn't seem to get any more basic than this, but I can't figure out why this isn't working (preventing <p> from being red, that is). Any help on this would be much appreciated.
:not(p) matches body.
The default color value is inherit.
p has no style set.
p is therefore inheriting its colour from body, which is red.
Solutions: explicity define what you want to be red, OR explicitly set a different colour for p (ie. don't use :not), OR use :not(body):not(p)
This looks it is because you have not defined a specific style for p tag. So :not(p) applies even to body element and inherited.
You can create a separate id for the <p> and you can use not in css.
HTML
<p class="hiya" id="hiya">hiya</p>
<p class="hi" id="hi">hi</p>
<h1>this is h1</h1>
<h2>this is h2</h2>
CSS
p:not(#hiya)
{
color:#ff0000;
}
This will produce the output red color for the <p> except the <p> with the id "hiya".