Why I can't add a margin to the first line of my p like this ?
p:first-line{
color:red; /* ok */
margin-bottom:20px; /* nothing */
}
http://jsfiddle.net/xtb5M/
According to the W3C, the margin property doesn't apply to the first-line selector:
The ::first-line pseudo-element is similar to an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:
font properties
color property
background properties
‘word-spacing’
‘letter-spacing’
‘text-decoration’
‘vertical-align’
‘text-transform’
‘line-height’
You could fake it with line-height
p{
margin-top:-10px;
}
p:first-line{
color:red;
line-height: 40px;
}
http://jsfiddle.net/willemvb/Y9M28/
Related
Is the weight of first-line greater than that of first-of-type? I'm a little confused!
p::first-line {
color: green;
}
p:first-of-type {
color: blue;
}
h1:last-of-type {
color: red;
}
<div>
<p>p1contentp1contentp1contentp1contentp1<br>contentp1contentp1contentp1content</p>
<h1>h1hahaha</h1>
<h1>h1hahaha2</h1>
<p>p2content</p>
</div>
In my opinion, the first p-text should be completely blue.
::first-line is a pseudo element, which means that it behaves as if it is an element inside its parent, the p.
So CSS properties defined on the p don't even apply to the ::first-line, unless they are inherited.
In this case, the color property does inherit, but it is simply overridden by the color of the pseudo element.
what is the way to child element not inherit parents property?
I know way to child element declare individually property.
I curious that people use another way.
You can either set some styles only for that element:
p{ color:red; }
or overwrite the default inherited styles (like margin in this case):
p{ margin: 0; }
or, in some contexts add a class or an id to add more weight to the selector (adding an id to the p):
div p{ color: blue; }
#myParagraph{ color: red; }
This could be a way
div{
padding:10px;
}
div *{
padding: 0px;
}
But its highly NOT RECOMMENDED for elements with many children
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
I added these css. But I can't get the placeholders/watermarks to have ellipsis. They do have the red font though.
input::-webkit-input-placeholder {
color: red !important;
max-width: 95% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}
input:-moz-placeholder {
color: red !important;
max-width: 95% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}
Since I am working for mobile, I want it to work in Safari.
Using the :placeholder-shown selector works well and will ensure any text input doesn't get hidden. Compatibility is pretty solid too.
input:placeholder-shown {
text-overflow: ellipsis;
}
<input placeholder="A Long Placeholder to demonstrate"></input>
YES
Method 1
Still supported on all browsers.
Overflow ellipsis of a placeholder can be achieved using the attribute selector:
[placeholder]{
text-overflow:ellipsis;
}
This will also have added the side effect of adding ellipsis to the inputs value in some browsers. This may or may not be desired.
[placeholder]{
text-overflow:ellipsis;
}
input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
<input value="A long value to demonstrate"></input>
Method 2
No longer supported.
As of Chrome and Edge V100+ the ::placeholder pseudo element selector does not support the text-overflow property.
::placeholder{
text-overflow:ellipsis;
}
::placeholder{
text-overflow:ellipsis;
}
input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
WHY?
It seems like a tightening of the conformation to the specification:
Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
All font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family.
All background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode.
The color property
word-spacing, letter-spacing, text-decoration, text-transform, and line-height.
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
OLDER BROWSERS
Need support for older browsers?
IE not playing nicely?
I created a little css hack to simulate a placeholder. Use this code to simulate your inputs placeholder. It's a little dirty but can offer support as far back as IE6.
.ellipsis{
box-sizing:border-box;
position:relative;
padding:0 5px;
background:#fff;
color:rgba(0,0,0,0.5);
width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ellipsis input{
box-sizing:border-box;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
display:block;
background:none;
border:1px solid #ddd;
color:#000;
padding:0 5px;
}
.ellipsis input:focus{
background:#fff;
}
<div class="ellipsis">
A Long Placeholder to demonstrate A Long Placeholder to demonstrate A Long Placeholder to demonstrate
<input></input>
</div>
Support outside of this range would require javascript.
To cover as many browsers as possible, try these:
[placeholder]{
text-overflow:ellipsis;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-overflow:ellipsis;
}
::-moz-placeholder { /* Firefox 19+ */
text-overflow:ellipsis;
}
:-ms-input-placeholder { /* IE 10+ */
text-overflow:ellipsis;
}
:-moz-placeholder { /* Firefox 18- */
text-overflow:ellipsis;
}
According to the specification, text-overflow applies only to block containers like div and p tags. And since inputs are not containers, you cannot apply this CSS rule.
Just input { text-overflow: ellipsis; } without any placeholder pseudos did the trick.
I'm having an CSS problem, i need to achieve this
article div#comments-wrapper ul.sub-comment:before {
width:1px;
height:67px;
background-color:#e4e4e4;
position:absolute;
margin-left:-595px;
margin-top:-36px;
content:'';
}
article div#comments-wrapper ul.sub-comment:nth-child(1):before {
height:37px;
margin-top:-6px;
}
but i can't put two pseudo elements like that, and i've tested it (doesn't work),
also tried some other ways but didn't manage to figure it out.
:nth-child() doesn't filter by classes or anything. In your code, your first ul.sub-comment isn't the very first child in #comments-wrapper, so it doesn't work.
Instead, use this selector technique and invert your height and margin-top styles as follows:
article div#comments-wrapper ul.sub-comment:before {
width:1px;
height:37px; /* was 67px in your code */
background-color:#e4e4e4;
position:absolute;
margin-left:-595px;
margin-top:-6px; /* was -36px in your code */
content:'';
}
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before {
height:67px; /* was 37px in your code */
margin-top:-36px; /* was -6px in your code */
}
Basically, instead of :nth-child(1) (or :first-child for that matter), use a sibling selector with another ul.sub-comment to apply the original styles to all subsequent ul.sub-comment elements after the first one.
Updated fiddle (also inverted the background-color styles so the first one remains blue)