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.
Related
This might be a stupid question, but if I have something like this:
<div id="topDiv">
<header id="headerId" class="headerClass" style="display: block;">
::before
<div>...</div>
<div>...</div>
<div>...</div>
</header>
</div>
What does this 'before' in the html do?
I understand if I do the following in the CSS it adds these properties before every p element: (this is from a W3Schools example)
p::before {
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
You're seeing that ::before because that is how your browser's developer tools represents a CSS ::before pseudo-element in the document tree view.
If you literally had a string of text "::before" in your HTML file, it would do nothing special as it has no meaning in HTML; it would just show up as the text "::before" on your page.
I guess there can be two reason (Its via personal experience & observation not a valid reference for support)
1) It provides a visual representation of these pseudo selectors according to their meaning
::before before the div to which its applied to and ::after after the div to which its applied to
2) Pseudo selectors are used to insert some content:'' in HTML. So this provides a distinct representation. User can easily inspect which content is inserted in HTML via these pseudos.
And Yes its on each browser how the implement and show the pseudos.
good luck!
It is stating that you have a pseudo element in your html. Since it is not a 'real' element, you can't physically manipulate it like you can do with 'real' elements like div's and buttons.
You may also see ::after appearing in places, representing somewhere for either your id="headerId" or class="headerClass" has a ::before element declared.
the whole reason they are not declared like <after></after> or anything like this is because it is 'a ghost' or 'shadow' of a 'real element', and hence can only be styled/manipulated in the css before the html is rendered.
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 8 years ago.
I am working on an input form, with different input fields. They all get an attribute with their form.
Eg:
<input class="input-text" form="price">
or
<input class="input-text" form="percent">
I would like to add a suffix with the pseudo element ::after but cannot figure out how.
Ive already tried this CSS:
input[form="price"]::after{
content: "€";
}
and this:
input::after[form="price"]{
content: "€";
}
The problem seems to be with the ::after itself, but i cannot figure out what it is.
Pseudo classes like after and before cannot work on input elements. Why so?
Because they work only on elements which can contain html markup. An input tag doesn't.
Robert Koritnik explained this quite good in this question.
There're other questions like that and like this:
CSS :after input does not seem to work
Add CSS content image after input
Clearly saying no you cannot do that in non container tags.
According to w3 standard :after or :before can be used in only container element.
So you will have to use javascript.
See specification http://www.w3.org/TR/CSS2/generate.html#before-after-content
But there is an alternative you can use contenteditable property which makes div editable & then you can use after tag. But contenteditable is introduced in html5.
Here is a js fiddle http://jsfiddle.net/madterry/W4Y58/ . Down side is you cannot use this as form field & it is not widely supported.
The problem is, that pseude elements are only supported on container elements, but not on allready replaced elements like images or input fields.
This is because they get rendered in the element itself, which is clearly impossible on input elements.
In the W3C specification it is even defined.
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:
Complex CSS selector for parent of active child [duplicate]
(10 answers)
Closed 9 years ago.
I'm trying to give a style to all <div> with children and not to those with no children.
Or, give style to all, and give a different style to those with no children.
The structure is similar to this
<div>
<div>
<div>
<div>Don't style me</div>
<div>Don't style me</div>
</div>
<div>Don't style me</div>
<div>Don't style me</div>
<div>
<div>
<div>Don't style me</div>
</div>
</div>
</div>
</div>
CSS level 4 is being worked on, and will include selectors that can do what you're asking.
When it does become available, the syntax will look like this:
.myclass! div { ... }
This will select the .myclass element that has a div element as a child. It's basically a normal CSS selector, but with the exclamation mark to tell it which element to select. (although note that the preferred syntax has changed a couple of times during the drafting process, and they've not finalised it yet!)
If you're interested in following up about this, you can read the full spec in its current form here: http://dev.w3.org/csswg/selectors4/
However that's in the future. For current browsers, what you want to achieve isn't really possible with pure CSS.
So what options do you have?
The most obvious work-around is to use javascript to achieve the effect you want. jQuery is perfectly capable of selecting elements in the way you've described, like so:
$('.myclass:has(div)');
Also obvious would be adding a class to the elements you want to style, and just using that. This could be done in Javascript or in your server-side code. Probably the most obvious answer, really, in the absence of an actual CSS selector you can use.
Depending on what you're trying to do, you could try re-arranging you HTML structure; in some cases, a bit of lateral thinking can help you achieve results that appear to do this, even with the CSS selectors available today. In particular, hover effects can often be worked around this way.
Again, depending on what your code looks like and what you're trying to do with it, you could try making use of some of the more esoteric CSS selectors. For example, div:empty will select divs that have no content. This won't work for the examples you've given (as you have text in the 'empty' divs), but would work in other cases where they really are empty.
It can be done in 2 ways :-
1) Giving a specific class to the parent div and the child div will inherit the style.
2) Giving class to divs individually.
The better option would be implementing via the 1st option.
Use the ">" operator.
Some documentation
Like div > div {}
http://jsfiddle.net/9tLXP/
div {
padding: 10px;
background: red;
}
div > div {
padding: 10px;
background: blue;
}
div > div > div {
padding: 10px;
background: orange;
}
div > div > div > div {
padding: 10px;
background: green;
}
Edit: Obviously I went ahead and styled each one with a different background color to demonstrate the point. In your case you would delete some of the extra styling I provided.
If you are truly looking to use the structure you posted, one where no classes or id's are assigned to any elements, then you can not accurately detect the bottom element in a group with n amount of children.
Operators such as > can give you a direct descendant but they can not tell you if it has any further children without further loops as Michael has shown. The issue therefore with Michaels method is you could not detect a div at level 3, and a div at level 4 and style them the same, as all div's at level 3 now inherit this style.
Long and the short - without adding in a class or 2 you can't accurately detect the bottom most child of a nested structure without effecting it's siblings.
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