This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS selector for “foo that contains bar”?
All the <p> on my site get margin-bottom of 20px.
I don't want to apply this margin-bottom to <p> which contain an <em> element.
Is it possible to this without classes or id's.
CSS3 can be used.
To apply style to all p not containing an em:
p:not(:has(em)) {
margin-bottom: 20px;
}
I'm afraid this isn't possible with pure CSS.
Unfortunately, there is no way to do this with pure css. See Is there a CSS parent selector?
You could use some jQuery though.
$('em').parent().css('marginBottom','0');
http://jsfiddle.net/jasongennaro/5pPGF/
The only way I could see doing this in pure CSS is with a parent-node selector. Unfortunately, such a thing does not exist in CSS2 or CSS3.
What you're describing is basically an "ascendent" selector, selecting some element based upon its descendents. This isn't possible using just CSS, you would have to also use JavaScript.
Pure CSS does not do that (yet) as far as I know, but you can achieve this by smart use of jQuery:
$(function() {
$("em").parent("p").addClass("nomargin")
})
Or something like that...
Your question is unclear. Pleae recheck your question. But you can set margins, paddings for global tags like
p{margin:0}
or
*{margin:0; padding:0 } for all elements then change it for exact divs, classes. In that case all other ones still will set to margin:0, padding:0
Related
This question already has an answer here:
What is it in a pseudo-element that makes the pseudo-element pseudo?
(1 answer)
Closed 6 years ago.
When I read about CSS and HTML I cross the word pseudo-elements.
I haven't found a good short explanation for what pseudo means. Could someone please explain this to me?
psuedo-elements allow you to style specific parts of an element. Some examples of pseudo-elements are:
::after
::before
These specific ones allow you to add style to just after, or just before an element.
for example:
.test {
background-color: gray;
}
.test::after {
content: ' some more text';
color: red
}
<div class='test'>
testing...
</div>
Here, we style the .test element normally
BUT, then we add a bit more after it using the pseudo-element selector ::after to let us add more text and change the colour.
You can read more and see more examples at https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements
Supposed or purporting to be but not really so; false; not genuine:
— https://en.oxforddictionaries.com/definition/pseudo-
A pseudo-element is something that acts like an element, but is not an element.
In a word, "fake".
A more complete definition can be found here: http://www.dictionary.com/browse/pseudo
A pseudo element is a CSS-generated non-DOM element that is rendered as if it was a DOM element in the browser. But it doesn't actually add a node to the DOM. So if you inspected it in, say Chrome Dev Tools, you won't see it as a regular node.
Interestingly some screen-readers read pseudo-element content and others don't.
This question already has an answer here:
Using :before and :after CSS selector to insert HTML [duplicate]
(1 answer)
Closed 8 years ago.
is there any CSS way to add div, p, span elements inside css content attribute?
I mean code like this
.textblockquote:before{
content: "<span class='green'>“</span>";
}
you won't be able to insert other things than text-element with css
BUT, what you want to do can be achieved this way :
.textblockquote:before{
color:green; /* <-- apply the styling you want */
content: "\0022"; /* <-- escaped unicode for 'quote' */
}
In the meantime, your question has already been answered (30 months ago): Using :before and :after CSS selector to insert Html
Look :
You can achive this with hexadecimal characters, but you shouldn't :)
See here: Adding HTML entities using CSS content
No, CSS is all about styling, not adding code.
You might be able to workaround this, but it's very bad practice.
It will probably be easier to achieve the requested effect or design in another way.
Its possible but its designed for text not html.
http://www.quirksmode.org/css/content.html,
Here is an example how you can achive this in Firefox. ( 2nd answer )
Insert HTML from CSS
You can add content as text for example, and customize it for you needs. In your case, you can add quotes in content of :before and :after elements, and absolute position them where you want.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to write a:hover in inline CSS?
Using CSS, I want to define a link's style. However, I want to do it in document, instead of defining it as part of the header. Is it possible to define it (including a:hovor, a:visited, etc).
I'm using the tag, and I would like to be able to do
<a style="a:hovor:color:#ffffff"><!-- ... --></a>
or something like that. I'm pretty sure that doesn't work. So how would define that, or can you even?
No, you can't.
Please, if it is possible, refrain from inline styles. They are bad practice.
If you really need to do this inline without stylesheets, you can solve this with javascript:
<a onmouseover="window.oldlinkcolor=this.style.color;this.style.color='#ffffff';" onmouseout="this.style.color=window.oldlinkcolor;">...</a>
Though, using onmouseover and onmouseout statically like that is also bad practice, but it will solve your issue cross browser.
You can always apply a CSS style on Mouseover with Javascript/jQuery. With that said, you should really avoid inline styles. Why can't you use a Stylesheet?
I'd prefer to give it a class and then define it in a stylesheet, but it's possible with JS/jQuery.
http://jsfiddle.net/Sxpkp/
This question already has answers here:
How to override !important?
(12 answers)
Closed 9 years ago.
I wrote a bit of html with some css styling injected into a third party site. But, their styling is messing with mine due to some !important declarations. I don't want this, and I don't want to use !important in my styles.
What can I do to prevent this?
Example at jsFiddle
The !important declaration overrides everything else, even inline styles and more specific hierarchy. The only way to override an !important is with an even more specific !important.
And this is why !important should be avoided.
You can overwrite !important contrary to what most people believe. You can even use this technique to overwrite inline styles applied by JS or 3rd party plugins (ex. Facebook!!) The most powerful way is like so:
td[style] {height: 110px !important;}
It acts as if you injected the style inline to the html because you are applying the styles to the actual style attribute of the tag. The combo of being inline and !important should trump everything, except for a style that is applied later and also inline and !important
Here's a fiddle with the working code: http://jsfiddle.net/9LvzP/
You can see that even though background-color: green !important comes before background-color: blue blue is more powerful and gets applied
Define the class with proper hierarchy that will work for you.
.list .row span{
color:red !important;
}
<div class="list">
<div class="row">
<span>Your text </span>
</div>
Try to do something similar to what I have created here.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I have this code :
<div class="main_parent">
<a href="www.google.it">
<img src="/path/image.jpg" alt="image" />
</a>
</div>
and I'd like to set the attribute text-decoration:none; to the link that contains an image.
So, somethings like :
.main_parent img < a
{
text-decoration:none;
}
but of course it doesnt works. How can I do it with CSS 2?
Simply put, you can't. CSS can only traverse the DOM downwards. If javascript/jQuery is an option for you, you could use that.
Nope, this is not possible.
Some smart people also wrote about this: http://css-tricks.com/7701-parent-selectors-in-css/
You read CSS selectors from left to right. So there is no real syntax for this right now.
I think this is not possible via CSS. You would have to use JavaScript and assign the style via DOM manipulation.
You can even do it with CSS3. There is no parent selector unfortunately.