Is it possible to get the attribute of the child element in the parent's pseudo element.
HTML
<div class="parent">
<pre>
<code class="foo" data-lang="bar">
....
</code>
</pre>
</div>
What i need is .parent::after have attr(data-lang) from .foo as content
thank you
It's not possible to do this as CSS by nature (and name) cascades. So the child elements data attribute is out of scope for the parent elements pseudo element to use.
From the Mozilla Developer Network:
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
It depends what you're after exactly with the value of the data attribute, but you can still style things with the child element but it depends on your use case for it. If you can, move the data attribute up to the parent (if that's possible to do here).
Related
According to CSS docs:
The width CSS property ... applies to all elements but non-replaced inline elements, table rows, and row groups
Input is inline element. So why width property is work with input element?
The exception is for non-replaced inline elements. Input is a replaced element.
Replaced element
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independent of the CSS. Typical replaced elements
are <img>, <object>, <video> or form elements like <textarea> and
<input>. Some elements, like <audio> or <canvas> are replaced elements
only in specific cases. Objects inserted using the CSS content
properties are anonymous replaced elements.
CSS handles replaced elements specifically in some cases, like when
calculating margins and some auto values.
Note that some replaced elements, but not all, have intrinsic
dimensions or a defined baseline, which is used by some CSS properties
like vertical-align.
Reference: MDN - Replaced element
I need to display some text before and after the input tag using CSS content.
Using the following code I am not able to obtain the desired effect on the input tag, but works fine of a tag.
What am I doing wrong? How to fix it?
http://jsfiddle.net/pgdu2tue/1/
<input id="test" type="text" name="nametest">
<br>
<a id="moz" href="http://www.mozilla.org/">Mozilla Home Page</a>
#moz::before {
content:"XXX" ;
}
#test::before {
content:"BEFORE" ;
}
#test::after {
content:"AFTER" ;
}
It doesn't insert content before or after using ::befoer & ::after because there is no content in an input tag. Read a similar post here
This is not due to input tags not having any content per-se.
input elements are a special type called replaced elements, these do not support :psuedo selectors, as they are outside the scope of CSS.
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independent of the CSS. Typical replaced elements
are <img>, <object>, <video> or form elements like <textarea>
and <input>. Some elements, like or <canvas> are replaced
elements only in specific cases. Objects inserted using the CSS
content properties are anonymous replaced elements.
Note that this is even referred to in the spec
This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML).
In my HTML, I have 2 lines that have the same class. I want to be able to target just the first element, but can't seem to figure it out. I am able to target both elements, but when I change the CSS to select the first child, it doesn't return anything.
Here is the CSS and the duplicate classes
If I use svg g.highcharts-axis-labels, it will select both elements.
I tried selecting the first child like below, but its not returning any elements with that CSS.
svg g.highcharts-axis-labels:nth-child(1)
Can someone point out the mistake I am making.
.highcharts-axis-labels follows the element with .highcharts-data-labels class. So you can write:
.highcharts-data-labels + .highcharts-axis-labels {}
To target the first one.
So, for your question why "its not returning any elements with that CSS".
According to the definition
The :nth-child(n) selector matches every element that is the nth
child, regardless of type, of its parent.
With this selector and your html,
svg g.highcharts-axis-labels:nth-child(1)
the parent is "svg", the child is to be a "g.highcharts-axis-labels" at position 1 (in the list of all children under "svg" tag).
But the child at position 1 is not a "g.highcharts-axis-labels". Therefore the result is "no element".
.highcharts-axis-labels:nth-of-type(1) should select the first element.
You want nth-of-type pseudo-class:
.highcharts-axis-labels:nth-of-type(2) {
}
http://www.w3schools.com/cssref/sel_nth-of-type.asp
Is it somehow possible to define certain look for DIV being empty, i.e having no accessors inside (no nested elements) without need of using JS, just using pure CSS?
Yes that's what the :empty pseudo-class is for.
From the MDN docs:
The :empty pseudo-class represents any element that has no children at
all. Only element nodes and text (including whitespace) are
considered. Comments or processing instructions do not affect whether
an element is considered empty or not.
I want to apply certain CSS to an element(with a certain class) if it is the one & only child within its parent. I can easily do this using jQuery but I'm looking for a pure CSS solution(that works across all major browsers). How do write selector expression for such elements ?
E.g. scenario:
<div>
<span class='a1'/>
</div>
<div>
<a>random text</a>
<span class='a1'/>
</div>
I would like the first div contained .a1 element to be selected as it is the only element within its parent.
Use .a1:only-child see this fiddle. Of course, it depends on what you consider "major browsers" as to whether it is supported or not (it is a CSS3 property).
Try this for Cross browser compatibility,
.a1:first-child:last-child {
color :red;
}
DEMO