Need help styling a div with multiple classes + pseudo classes externally - html

i have a website that i don't have the source code to. I am trying to make changes externally by placing html's before certain divs to alter how the website looks.
I have a div like this:
<div class="absolute zoom-image hidden group-hover:block top-0 border-2 border-[#f3f3f3] overflow-hidden bg-white" style="width: 721px;height: 541px;left: 721px;z-index: 50;"> CONTENT HERE </div>
I need to style it making it left:753px , but i can't define the classes of the div like i normally do on other examples.
I am trying this:
<style>
.absolute.zoom-image.hidden.group-hover:block.top-0.border-2.border-[#f3f3f3].overflow-hidden.bg-white
{
left:753px !important;
}
</style>
Sadly i can't define pseudo classes like this thus it doesnt work, does anyone have any idea how i can do this ?
Clarification:
The problem is i can not modify the div i posted earlier. I must write an additional code to modify it with !important. As i said i do not have the source code so these are not editable to me. I can only add a free html code on somewhere in the page. How can i edit this externally ? I need to write a code that refers this class since the div doesnt have any tags or id's. It has to be a code that refers to that class. I hope i made my point

Please don't be so confused about how to use the class & style attributes for the CSS. You can use only one class name in order to style your components, also, you don't need to use both inline styles ( here -> style= "width: 721px; height: 541px; left: 721px;z-index: 50;" <- ) and class styling to give CSS to your components.
Style attributes are used to write CSS along with the HTML tags. and id or class styling is used to write the CSS commands in a separate space.
This is a separate way to write the styling.
<div style="width: 721px; height: 541px; left: 721px; z-index: 50;"> CONTENT HERE </div>
Another way can be: -
(Here I used the class name as absolute)
<div class="absolute"> CONTENT HERE </div>
<style>
.absolute
{
left:753px;
top:0;
border: 2px solid #f3f3f3;
overflow:hidden;
background-color:white;
zoom:normal; // zoom-image hidden is confusing for me.
}
.absolute:hover{
dispaly:block;
</style>
// I wrote these style commands after decoding whatever you wrote in the class attribute.
Do try this code, and also do refer to MDN Docs or any other documentation before write the code.

Related

Changing multiple pages' CSS that share a common class

I want to change the padding of 2/6 pages in my website, but the content divs of the website are using the same CSS, the only solution I can think of is changing the id's of all the content divs and make separate CSS for all of them. Is there an easier way to do this?
You could create a new class and apply it to only the places you want changed.
.pad-class{
padding:5px;
}
<div class="other-class pad-class"></div>
Placing the class last will allow for your new class to overwrite the first one.
You should just apply a specific class to the <body> tag of the pages you want to modify. Then you can write a CSS rule for that class.
HTML (normal page)
<body>
...
</body>
HTML (different padding page)
<body class="different-padding">
...
</body>
CSS
<style>
body { padding: 10px; }
body.different-padding { padding: 20px; }
</style>
<div class="first second"></div>
Insert second where you want to change padding else keep only single class
further reference: Using two CSS classes on one element
you can also use inline styling if no. of divs are less

Reset the style of a HTML element

I have a webpage with elements, styles (imported and inline)
I want to reset the style for a specific element.
Example:
HTML:
<div class="parent">
This is the parent div, it colors the <strong>strong in red</strong>
makes a <small>small underlined</small>
<h4>sets a margin-left 10px for a H4</h4>
and many other stuff<br><br>
<div class="child">
this is the child element<br>
here a <strong>strong should not be red</strong><br>
<small>small should not be underlined</small>
<h4>H4 should not have a margin-left</h4>
and so on...
</div>
</div>
CSS:
.parent strong{
color:red;
}
.parent small{
text-decoration: underline;
}
.parent h4{
margin-left: 10px;
}
I want the child div to ignore the styles coming from his parents, including the html element
Here is an illustration of my example
The styles I gave here are just examples, there are much more
I cannot modify the parent CSS, is being dynamically generated
My child div is injected in the page, I can also inject any CSS I want
I cannot know in advance the content of the parent CSS
The only solution I found so far is including the child element in an Iframe, but is really really ugly!!
Any one can help how to achieve this? A JS solution is also acceptable.
.child strong{
color:pink !important;
}
1.You adjust the injecting code css via !important.
2.Even though you can't predict the css of the parents you can only have some basic CSS thing for your injected code.
Example
You can use css immediate child selector '>'
in your example
.parent>h4{
margin-left: 10px;
}
.parent>strong{
color:red;
}
check the updated demo
http://jsfiddle.net/WRDft/11/
Refer: http://msdn.microsoft.com/en-in/library/ie/aa358819(v=vs.85).aspx
CSS '>' selector; what is it?
This question has already been asked and discussed.
There is no way to blanket clear styles but there are work arounds.
Reset/remove CSS styles for element only
If I am understanding you correctly and if you know what content is being injected into your child div then the JQuery solution is very simple:
$(".child strong").css({"color":"black"});
$(".child small").css({"text-decoration":"none"});
$(".child h4").css({"margin-left":"0"});
The JQuery code can then be wrapped in any sort of function you desire.
Here is your fiddle with the JQuery added. Hope that helps.
Note: the JQuery selector - for example: $(".child strong") - can be as specific or as general as you like and you can add as many css rules as you like by using a comma separated list like this:
$(".child strong").css({"color":"black", "font-weight":"bold", "text-decoration":"underline", etc, etc});
Thank you all for your thoughts guys, unfortunately, the best way I managed to achieve this is by wrapping my content inside an IFrame
Advantage: Immediate and easy reset
Disadvantage: I cannot manipulate the elements outside of the IFrame

Access Style property through CSS

Is there anyway i can access the style property for the particular div? For example, I have a code like below
<div class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
I want to apply some other background color for this division. But i don't want to modify the class "testing", because it is being used in some other places also. Is there anyway using CSS only to access the style property and apply my new color?
I think attribute selectors may be what you are looking for:
div.testing[style="background-color:#ff00ff;"] {
background-color: new_color !important;
}
You can create another class and overwrite necessary property:
.testing-active {
background-color: red;
}
and use it like this:
<div class="testing testing-active"></div>
You need to make a style that has higher priority than the style. You could use the !important attribute to do that:
<div class="testing" style="background-color:#ff00ff;background-color:red !important;">
Big important caveat: whatever it is you're trying to do doesn't sound like a good idea, because the code will be very difficult to maintain. What is the underlying problem that you are trying to solve?
You can access the elements with this certain style like this:
.testing[style="background-color:#ff00ff;"] {
/* put your attributes here*/
}
but you cannot change the background-color attribute since this one has a higher priority in the html.
see this:
.testing[style="background-color:#ff00ff;"] {
background-color: #00f; /* not possible */
margin: 30px; /* possible */
}
what you can do is add a new attribute to your html like this:
<div class="testing" changecss="true">
This is my test Paragraph
</div>
and add this css:
.testing[changecss="true"] {
background-color: #00f;
}
See the JsFiddle as well.
"Think it is a dynamic code. How can i add new class without using javascript? "
The Answers is You cannot add a new class using CSS dynamically/ runtime. The only way to do it is by using javascript/jquery:-
HTML:
<div id="mydiv" class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
JQUERY:
$('#mydiv').css('background','#ColorCode');
This way your class also wont change( since its being used in other places) and you can change the background also.
Can i ask why you are trying to achieve this using CSS?

Replace HTML IMG with CSS IMG?

I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.

How to differentiate the common css class by using other css class

<div style="position: absolute; left: 0px; top: 5px;" class="v-caption v-caption-top_header">
<div class="v-captiontext">Create User Wizard</div><div style="clear: both; width: 0px; height: 0px; overflow: hidden;">
</div>
</div>
<div style="top: 70px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 5px; width: 1257px;" class="v-label v-label-intro_key intro_key">
</div>
</div>
<div style="position: absolute; left: 10px; top: 55px;" class="v-caption v-caption-intro_key">
<div class="v-captiontext">User Details.
</div>
I have to apply some styles to Create User Wizard text. But I cannot refer v-captiontext css class directly becoz the same css class is used by other text also for example User Detailstext. How can apply changes to only Create User Wizard text.
You can refer to nested classes. In your current HTML you could refer to v-caption-top_header with v-captiontext inside it like this:
.v-caption-top_header .v-captiontext {
...some styles here...
}
or
.v-caption-top_header>.v-captiontext {
...some styles here...
}
(the first of these specifies that v-captiontext is somewhere beneath v-caption-top_header in the DOM, whereas the second one specifies that it is a direct child; ie immediately beneath it in the DOM. The second one is probably preferable, except that it doesn't work in IE6, so if you need to support IE6 then use the first one)
The other options you have would require you to change the HTML code.
You could give the Create User Wizard element a specific ID and use that instead of the class:
<div class='v-captiontext' id='wizard_element'>....</div>
#wizard_element { ..... }
or use multiple classes:
<div class='v-captiontext wizard_element'>....</div>
.wizard_element { ..... }
In this case, the choice between ID or class would depend on whether you is bit of styling on this element is going to be unique - if it is specific to this element then use an ID; if you want to use it elsewhere then use a class.
If you still have problems, you could try using some trickier solutions:
CSS supports attribute selectors, which allow you to select elements based on specific HTML attributes. This can be very useful, but I don't think it'll help you here (since you don't have much in the way of attributes other than styles and classes anyway). Also this again doesn't work in IE6.
Another option could be pseudo-selectors such as :first-child or :nth-child(). Using these you could for example specify that the first matching element gets one style and others get something else. These may actually be useful for you, in conjunction with other techniques above. However you'll have problems with these with all current versions of IE, so probably not recommended.
There's a very good overview of the available CSS selectors, along with which browsers support them at Quirksmode.org: http://www.quirksmode.org/css/contents.html
As the div you want to style a child of v-caption v-caption-top_header but v-caption v-caption-top_header is not the parent of the other div you do not want to touch, this should work:
.v-caption.v-caption-top_header .v-captiontext {
/* whatever style you want */
}
Of course the better approach is simply to add an id="someuniqueid" to the div you would like to style and then add
#someuniqueid { /* style goes here */ }
give it an ID as opposed to CLASS
Is the class v-caption-top_header of the parent div unique? If yes you can use a descendant selector:
.v-caption-top_header .v-captiontext {
...
}
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors