<div style="color:#FFFFFF !important;">
<!-- A Dynamic content comes from from third party. -->
<p style="color:red;"> This should be white instead of red. </p>
<p>Test is test. This should also be white. </p>
<span> Check is check. This should also be white. </span>
<!-- Dynamic Content ends -->
</div>
HOW do I make all the texts to be white inside the div given above. Is it possible by using any jquery or other similar language??
Using Jquery children() and css() function to override the style , check my FIDDLE for the demo
Finally Found answer.
$(div p).css('color':'white');
$(div span).css('color':'white');
This was what I exactly wanted. It overrided the inline css of all the p tag as well.
Related
Im trying to change the html code of a website. As you can see here: https://share-your-photo.com/b12b204e8c
The Code starts with an h3 tag. i want to replace it with a p tag. at beginning with <p class=and at the end of the code with </p>. But the code turns red at the end. can you give me a solution how i can do?
So I see that you had the <h3></h3> wrapped around everything and that is not the proper syntax in html. Its called hierarchy. Hierarchy is
An element that is directly above another element in the hierarchy is
called the parent of the element below it. The element below the
parent is called the child. When two elements are equal in the
hierarchy, they are known as siblings.
--Thx Google... A <h3></h3> tag can't wrap all of those elements only tags like a <div> can or a <span>. A <div> tag is a block element. So if you have 2 <div> tags like this... <div>HI</div> and <div>Hello</div> "HI" will be on top and "Hello" will be on the bottom but if it were <span> It will make it horizontal <span>Hi</span> and <span>Hello</span> the output will be "Hi Hello". If you check out this link they briefly explain nesting. But there are many many places you can go to understand this [https://www.w3schools.com/html/html_elements.asp1 Hopefully that helps you! Keep on coding! 👍
You said: "_the code turns red at the end...". The end of what??? Are you trying to edit the code locally in an editor such as sublime, vscode?
Basically, think of an Html document as a Word document that contains titles, subtitles, etc..
In Html documents, we have the following hierarchy structure.
<h1>My Page Title</h1>
<h2>My Page Subtitle</h2>
<p>here we can have only text, <strong>bold text</strong>, <i>italic</i>, and other styled text with <span>spanned texts</span></p>
<div>
<h3>Layouts</h3>
<p>you can use divs to structure your layout, so, doesn't make sense to have divs inside paragraphs.</p>
<p>If you want, you can break lines with <br> tags</p>
</div>
Problem: I am creating a testimonials page and one of the replies is by an admin, who have a red "ADMIN" tag where the normal stars would go. I have tested the waters by removing the ending p tag, putting quotes on both the red and color tags. Nothing seems to work.
Expected Result: Testimonial profile with a red ADMIN tag on the top right corner of the box
Code:
<div class="container">
<p test-align: right; color="red";>ADMIN<p>
<img src="pic-3.jpg" alt="Avatar" style="width:90px">
<p><span>Someone.</span> TRAVEL Travel CEO.</p>
<p>We are glad you enjoyed are service. We hope to see you again!</p>
</div>
You have to place inline styles inside the style attribute:
<p style="text-align: right; color:red;">
Also: don't use equal signs (=) to specify styles ;-)
It will work with just that!
Try playing around with the CSS using inspect element.
you must use style, and you should learn CSS again.
<p style='test-align:right;color:red';>ADMIN<p>
I have a <a> link with items inside. When I put a <p> tag around it, to simulate drupal's line break and paragraph filters that will be applied to my code automatically, The link becomes two links. One link is inside the <p> with no children the other is outside with one of the child elements. Why is this happening and how can I prevent it?
<div class="notDrupal srvTileGroup">
<p>
<a href="http://www.airforcemedicine.af.mil/" class="notDrupal srvTile shadow2 shadow6h">
<div class="notDrupal srvTileTxt bAirforce"><!-- <p class="notDrupal">AIR FORCE</p> --></div>
<img class="notDrupal srvTilePic" src="https://openclipart.org/image/2400px/svg_to_png/256723/BackgroundPattern126Colour.png" alt="air force"></img>
</a>
</p>
</div>
Codepen
The issue is not related with Drupal. You had placed a div element inside an anchor. Replace that div with span and you can see your code start working perfect.
For Info please see Fiddle
I'm working in a content management system that allows me limited (no) access to the stylesheets, but does allow me to insert CSS into certain templates. So I have this:
<div class="inside_widget">
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
etc...
</div>
Where inside_widget, input, and form_label are all defined in a sheet I can't touch. I want to put some custom CSS on "form_label" without having to touch every single span.
I tried using the style attribute in the containing div, but that did not work.
<div class="inside_widget" style=".form_label {color:#FFFFFF;}" >
Note: I want to retain everything else in the inside_widget styling, and not have to define a whole new class.
I think what the OP is trying to achieve is not having to repeat the style="" attribute for every single <span> in his form.
This can be done by simply adding your own class name to the enclosing div's classes:
<div class="inside_widget myclass" ...>
<!-- ... -->
</div>
Then make your own secondary stylesheet and define myclass:
.myclass span
{
color: #ffffff;
}
You can put this secondary CSS either in a <style> tag in the HTML itself, or in its own CSS file linked in.
You could do it this below.
<span class="form_label" style="color:#FFFFFF;">Form Stuff</span>
Inline styles like this will overwrite any css rules in a stylesheet, unless in the stylesheet they have a rule with !important
you do not know css right? will look like
<div class="inside_widget" style="color:#FFFFFF;" >
but I suggest you create a new css file and add whatever you want in the same
I have this simple html markup:
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee
<p class="zumba">
1996-03-14
</p>
</div>
.....
So my aim is to have the <p> with the class="zumba" in the same line like the text Daddy, Yankee but on the right site:
I added float-right to align it a the right site, what worked out. But somehow its displayed in a new row!
Then i added:
.zumba {float:right; display:inline}
But the problem stays! Why? Thanks and here you can test you ideas:
http://jsfiddle.net/kMuA6/
Change yout <p> to span
HTML
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee <span class="zumba"> 1996-03-14 </span>
</div>
CSS
.zumba {float:right;}
Fiddle : http://jsfiddle.net/logintomyk/drLbx/
General Tip: If its not much of a text, <span> is always a better option to show in same line (and different style)!! :)
They have top and bottom margin. This works:
.zumba {float:right; display:inline; margin:0;}
You could do this whitout using any float.
It will work with < P > and < SPAN >.
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee
<span class="zumba">
1996-03-14
</span>
</div>
I've add some color to identify.
Fiddle: http://jsfiddle.net/kMuA6/2/
Floating elements always make them display:block, no matter what you define. (check firebug or any other developer tools for the value of display) Do you have control over the markup? Then wrap the "Daddy, Yankee"-text in an extra element and let it float left.
try this fiddle:
http://jsfiddle.net/kMuA6/1/
I just used <span> instead of <p>