I give up. Why is :first-letter not working here?
strong {
font-weight: bold;
color: blue;
}
strong:first-letter {
color: red;
}
<strong>test test</strong>
Further to other answers, it also (in Chromium at least) works with elements with display: inline-block, so the display simply has to be anything other than inline (including list-item), for example:
strong {
font-weight: bold;
color: blue;
display: inline-block;
}
strong::first-letter {
color: red;
}
JS Fiddle demo.
Also, ::first-letter is a pseudo-element, so the syntax should be double-colon rather than single, in order to distinguish the selector from a pseudo-class.
first-letter does not work with inline elements, only on block elements.
first-letter can only be used with block elements.
This will work, but the question is how useful a block level strong is:
http://jsfiddle.net/UZpLG/
strong {
font-weight: bold;
color: blue;
display: block;
}
strong:first-letter {
color: red;
}
<strong>test test</strong>
Here is JSBin
:first-letter does not work with inline elements
Modify your CSS with this one, add display:block in your strong{...}
strong {
font-weight: bold;
color: blue;
display: block;
}
strong:first-letter {
color: red;
}
You should read about Note: The "first-letter" selector can only be used with block-level elements.
and Block-level elements
and example http://jsfiddle.net/eLvWt/6/
strong {
display:block;
color:green;
}
strong:first-letter {
color: red;
}
NOTICED: Please ignore this my answer's references since it is out-dated.
Related
I've got a CSS element set up to insert some content, via:
.foo:after {
content: "Bold, italics";
}
I'd like the word "Bold" to be rendered in a bold font-weight and the word "italics" to be rendered in an italics font-style. I know it's possible to add lines:
font-weight: bold;
font-style: italics;
But this will make both words bold and italics. If I could use html elements inside the content field I would put something like:
content: "<strong>Bold</strong>, <em>italics</em>"
But alas that's not possible.
Is there another way to achieve this effect? Ideally without invoking javascript and purely using html/css.
It's mentioned above, but unless you add a :before and :after not too sure how it can be accomplished without JS..
.foo {
float: left;
}
.foo:after {
content: "Bold, ";
font-weight: bold;
float: right;
margin-left: .5em;
display: block;
}
.foo:before {
content: 'Italic';
font-style: italic;
float: right;
margin-left: .5em;
display: block;
}
It also contains floats everywhere, but, hey! it works:)
Check it here: http://codepen.io/achoukah/pen/gpBopd
EDIT:
Heres the same, but with flex-box:
.foo {
width: 100%;
clear: both;
display: flex;
}
.foo:before {
content: "Bold, ";
font-weight: bold;
margin-left: .5em;
order: 1;
}
.foo:after {
content: 'Italic';
font-style: italic;
margin-left: .5em;
order: 2;
}
You do have other pseudo elements than 'after'/'before', like first-line or first-letter, which, with some imagination, maybe you could use on your particularly case:
w3schools Pseudo-elements
But 'inside' those first 2 I think you can not do nothing more, like #s0rfi949 pointed out.
This is very simple but it just came up on me; and, I can't believe there is nothing I can do about text-decoration inheritance.
I understand that if there is a <div> everything in there has to be underlined. But for a nested <div> with a separate class or id to take on the inheritance even if (none) is selected?!? I don't buy it. This happens with text-style as well, but not color.
#hello {
font-weight: bold;
}
#me {
text-decoration: underline;
color: #cc33cc;
}
.home {
text-decoration: none !important;
color: black;
}
<p id="hello">hello</p>
<div id="me">me
<div class="home">go</div>
</div>
You can position .home absolutely to prevent the text decoration from applying:
#hello {
font-weight: bold;
}
#me {
text-decoration: underline;
color: #cc33cc;
}
.home {
position: absolute;
color: black;
}
<p id="hello">hello</p>
<div id="me">me
<div class="home">go</div>
</div>
From the CSS2.1 spec:
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
You can also float it or display it as an inline-block, but doing so will place the element next to the text in the parent element rather than below it as with a block-level element. Absolutely positioning (without offsetting) will not move the element.
Since absolutely positioning an element takes it out of the flow (which is why it prevents parent text decorations from applying), this means if there are any other in-flow elements after .home that need to be aware of its position, you will need to style those accordingly. For example, the next element needs to have a top margin that is equal to its height, or something along those lines.
Just replace your styles with below CSS Code.
.home {
color: black;
display: inline-block;
}
You should try to add Combinators in css
#home {
text-decoration: underline;
color: #cc33cc;
float:Right;
}
.noDecoration, #home ~ p {
text-decoration: none;
color: black;
}
You have to write your hmtl something like this
<div id="home">
<p>Home-1</p>
</div>
<div id="home .noDecoration">
<p>Home-2</p>
</div>
I hope this will solve your problem
You can use > * select all the elements inside #me,
#me > * {
text-decoration: underline;
color: #cc33cc;
}
Question: How can I have elements display:inlinebut still have a carriage return at the end of each span or a element?
Caveats:
No br tag
must use display: inline
undetermined width of elements
HTML:
...
<hgroup>
<span>{{splash.title}}</span>
<span>{{splash.desc}}</span>
<a ui-sref="principle" class="btn-primary">Enter</a>
</hgroup>
CSS:
hgroup {
max-width: 360px;
}
span {
font-weight: 300;
color: $base-black;
font-size: 3.75rem;
display: inline;
}
While the other answer featuring white-space is just as good here’s another option:
Instead of using a pseudo-class just style the hgroup with
white-space: pre-line;
You can just tell it to in your CSS with a pseudo-class like this
span:after {
content:"\000A";
white-space: pre;
}
Include display:table-caption; to the span class
span {
font-weight: 300;
font-size: 3.75rem;
display: inline;
display: table-caption;
}
I am trying to change the css property of first line of a big sentence, I am experimenting with it by using color property, I have an html element
<span class="tripname_heaing">Where Hummus All Began: Jasdasdasddasdasdasdasdadasdasdasdasdsadsadasdasdordan & Issdassasdsadsadsadrael</span>
and CSS property
.span.tripname_heaing:first-line {
color: red
}
span.tripname_heaing{
color: blue
}
span.tripname_heaing {
font-size: 24pt;
font-weight: normal;
line-height: 24pt;
margin: 0;
padding: 0;
}
But the psuedo element property is not working with the above syntax. I am adding a fiddle to show the demo. What could be wrong with this?
http://jsfiddle.net/X33pY/126/
And edit made to fiddle to show the feature
http://jsfiddle.net/X33pY/126/
The ::first-line pseudo element doesn't apply to inline-level elements; from Selectors Level 3:
In CSS, the ::first-line pseudo-element can only have an effect when
attached to a block-like container such as a block box, inline-block,
table-caption, or table-cell.
You can instead use a <p> or change the display value of the <span> - http://jsfiddle.net/X33pY/127/
You had a lot of problems like color: red, it should be color: red;
You also had to add display: block; to the main container since it is a span tag, these are not block elements.
.tripnameHeaing {
font-size: 24pt;
font-weight: normal;
line-height: 24pt;
margin: 0;
padding: 0;
color: blue;
display: block;
}
.tripnameHeaing:first-line {
color: red;
}
jsfiddle with answer
I have a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.