I have a paragraph like this
<p> Lorem ipsum dolor sit amet, /* consectetur adipiscing elit. */ </p>
I want to have a CSS class that have a different font color for the text between /* and */
Thanks for help!
You can't use Expressions to do this.
CSS / HTML Way, by inserting an element inside.
You can use this way:
<p> Lorem ipsum dolor sit amet, <span class="comment">/* consectetur adipiscing elit. */</span> </p>
CSS:
p span.comment {color: #999;}
Demo: http://jsfiddle.net/jNvSw/
Or, if you wanna do in the JavaScript way (uses jQuery, but it can also be done using pure JavaScript):
$(document).ready(function(){
$("p").html($("p").html().replace('/*', '<span class="comment">/*'));
$("p").html($("p").html().replace('*/', '*/</span>'));
});
Demo: http://jsfiddle.net/jNvSw/1/
<p> Lorem ipsum dolor sit amet, <label class="classA"> /* consectetur adipiscing elit. */ </label></p>
<style>
.classA
{
font-size:12px;
font-family:Arial;
color:blue;
}
</style>
Replace your markup (/**/) with <span> tags if possible, then assign class with appropriate color to them.
You could hack it using the :first-line pseudo-element, assuming there's a linebreak:
<p> Lorem ipsum dolor sit amet, /* consectetur adipiscing elit. */ </p>
p { color: grey;
p:first-line { color: black; }
Note that this answer is not to be taken seriously.
Related
HTML
<div class="tableRow">
<div id="0-0">
<p>Point {{levelOne}}</p>
</div>
<div id="0-1" (click)="select($event)">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </li>
</div>
<div id="0-2" (click)="select($event)">
<li >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. </li>
</div>
<div id="0-3" (click)="select($event)">
<li>
Lorem ipsum dolor sit amet,
</li>
</div>
<div id="0-4" (click)="select($event)">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
<li>lorem ipsum dolor</li>
</div>
<div id="0-5" (click)="select($event)">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
</div>
</div>
CSS
.tableRow {
width: 90%;
display: grid;
grid-template-columns: 10% 18% 18% 18% 18% 18%;
}
.tableRow > div {
background: $white;
padding: 1em;
border: 1px solid $purple-70;
text-align: center;
cursor: pointer;
}
.tableRow > div:first-child {
font-weight: bold;
background: $purple-10;
cursor: default;
}
.selected {
background-color: red !important;
}
TS
import { Component, OnInit } from "#angular/core";
#Component({
selector: "example",
templateUrl: "./example.component.html"
})
export class Example implements OnInit {
public levelOne: Number = 1;
public levelTwo: Number = 3;
public levelThree: Number = 9;
public LevelFour: Number = 27;
public selected = false;
constructor() {}
ngOnInit() {}
select($event) {
let id = $event.target.id;
if ($event.target.localName !== "div") {
let id = $event.target.parentElement.id;
}
console.log(id);
}
}
with the following code clicking outside the li element results in id being set to the actual id but when I click on the li element within the div id is set to undefined... however if i log $event.target.parentElement.id to the console it will print the correct ID when clicking the li element.
Im pretty sure If i can get the correct ID captured on click I can use that to assign a style (change background color of the div for example)
Im not sure what I am doing wrong, or is there a better way in general?
Usually it's bad practice (for too many reasons to list here) to access the dom directly when using angular. You can do pretty much anything with tools provided by Angular, element property bindings for example:
<div [class.selected]="div1Selected" (click)="div1Selected = !div1Selected">
Has class `selected` when component's property `div1Selected` is true.
</div>
I would just use a style binding to bind whatever style you want to the parent div, and then use the child div clicks to change the value of the string bound to that style.
<div class="tableRow" [style.background]="myStyle">
<div id="0-0">
<p>Point {{levelOne}}</p>
</div>
<div id="0-1" (click)="myStyle = 'red'">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </li>
</div>
<div id="0-2" (click)="myStyle = 'blue'">
<li >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. </li>
</div>
<div id="0-3" (click)="myStyle = 'green'">
<li>
Lorem ipsum dolor sit amet,
</li>
</div>
<div id="0-4" (click)="myStyle = 'orange'">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
<li>lorem ipsum dolor</li>
</div>
<div id="0-5" (click)="myStyle = 'magenta'">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
</div>
</div>
Component
import { Component, OnInit } from "#angular/core";
#Component({
selector: "example",
templateUrl: "./example.component.html"
})
export class Example implements OnInit {
public levelOne: Number = 1;
public levelTwo: Number = 3;
public levelThree: Number = 9;
public LevelFour: Number = 27;
myStyle = 'inherit';
public selected = false;
constructor() {}
ngOnInit() {}
Alternatively, if you wanted to reduce the number of event listeners you are adding to your page, you could just set a single event listener on the parent div, and use the $event.target id's to check the target child div, and set the string based on that target.
<div class="tableRow" [style.background]="myStyle" (click)="setStyle($event)">
Then just add a func in your component similar to what you already have
select($event) {
let id = ($event.target as HTMLElement).id;
// here you could add a a switch case that sets the myStyle string based on the id of the clicked element
I am interested, if there is any chance to increase/decrease width of white-space chars inside <textarea>?
You can use word-spacing:
.triple {
word-spacing: 200%;
}
.extra-1 {
word-spacing: 1em;
}
<dl>
<dt>Normal space:</dt>
<dd class="normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Triple space:</dt>
<dd class="triple">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Extra 1em space:</dt>
<dd class="extra-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
</dl>
Percentage values were recently introduced and are not widely supported yet.
Quite interesting, I have found out, that spacing especially in <textarea> can be solved by font-family, which you choose for that textarea.
See in action: https://jsfiddle.net/hz3rv73a/6/
Ok, I have a situation where I need to display a custom image for the list bullets; obviously you can do this via list-style-image; however I want to use a sprite.
So another method I came across was to just put the background on the li itself, however without being able to restrict the width/height of the background more of the sprite shows.
I read this solution but..
It didn't seem to work for me for some reason - no background image
showed at all
I would like to support IE8 (extra styles ok though)
I also tried doing something like this and floating the divs inside:
<ul>
<li>
<div class="icon"></div>
<div class="text"></div>
</li>
<li>
<div class="icon"></div>
<div class="text"></div>
</li>
</ul>
... but if the text wrapped to the next line it would go under the icon as the icon height didn't extend high enough.
Is there anything I can do here?
You can use pseudo :before element for styling list
ul {
list-style:none;
padding: 0 0 0 40px;
}
ul li {
position:relative;
margin:5px 0;
}
ul li:before {
content:'';
background: url('http://blog.fogcreek.com/wp-content/uploads/2013/01/sprite.png') no-repeat;
width: 20px;
height: 20px;
display: inline-block;
border: 1px solid black;
vertical-align: middle;
background-position: -197px 0px;
position: absolute;
left: -34px;
background-size: 492px auto;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing amet, consectetuer adipiscing elit. elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>
I am trying to use HTML5 to mimic APA6 writing standards. I want to make header tags (<h>) 3-6 not go to the next line and am not sure if/how I can do this by altering the css style.
JSFiddle of Script
<html>
<head>
<title>Title</title>
<style>
h3 {font-size: 16px; font-weight:bold;}
</style>
</head>
<body>
<h2>What it looks like...</h2><hr>
<h3>Level 3 Header.</h3>
<p>Content here. Lots of random text to make an academic sound smart.. I've done my best to maintain APA6 standards in this document but within HTML5 some rules do not make sense. For instance, there are no page breaks.</p>
<br><br><br><br>
<h2>What I'd like it to look like...</h2><hr>
<p><b>Level 3 Header.</b> Content here. Lots of random text to make an academic sound smart.. I've done my best to maintain APA6 standards in this document but within HTML5 some rules do not make sense. For instance, there are no page breaks.</p>
</body>
</html>
It's quite easy, actually. Something like this:
h3, h4, h5, h6 {display: inline;}
EDIT: actually, that doesn't work, as the p still remains below the h3. This is one solution, though it might spawn other problems:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
h3, h3+p {display: inline;}
</style>
</head>
<body>
<h3>test</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui.</p>
</body>
</html>
Just add display: inline to the css of the H tag you want to remove line break.
you can use h{display: inline;} or h{float: left} but in first case you will lose its block element properties so you can use h{display: inline-block}
Take a look for your reference CSS display: inline vs inline-block
I have a problem. As you can see from the code, in div named "div1" I have 3 divs. I want first (yellow) div to be on top, third (yellow) to be on bottom, and the second div (pink) to fill the remaining space. The only fixed heights are the heights of yellow divs. Can you please help me, how to make the pink div fill the remaining space? Here is my code:
<div style="width:100%;background-color: lime;display: table;border-collapse: collapse;">
<div style="display: table-row;">
<div id=div1 style="display: table-cell;background-color: #0f0;">
<div style="background-color:yellow;width:100%;height:20px;">s</div>
<div style="background-color:pink; width:100%;">
Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa
</div>
<div style="background-color:yellow;width:100%;height:20px;">s</div>
</div>
<div style="background-color: #f00;display: table-cell;width:250px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
</div>
</div>
Having to post this as an answer in order to include the graphic. In Firefox and Chrome and IE, your page looks as I think you've described it:
Is this how it should appear?
With a little trickery this can be done:
Text in right cell is taller: http://jsfiddle.net/UQgXM/2/
Text in left cell is taller: http://jsfiddle.net/UQgXM/3/
I've separated the CSS from the HTML.
Major changes:
Given the table a height. This is needed to make the divs in the cell respond to the height setting. The table height is ignored. I set it to 1%, but the table want to be larger.
Given the pink div a height of 100% and a margin and padding to position the content right.
Given the yellow divs (especially the top one) a z-index of 1 and position: relative to make it respond to the z-index. Otherwise it would drop behind the pink div.
<div class="top">s</div>
<div class="middle">
Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa
</div>
<div class="bottom">s</div>
</div>
<div class="rightcell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
</div>
And the CSS:
.table {
width:100%;
height: 1%;
background-color: lime;
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
#div1 {
display: table-cell;
background-color: #0f0;
}
.top,
.bottom{
background-color:yellow;
width:100%;
height:20px;
z-index: 1;
position: relative;
}
.middle {
background-color:pink;
width:100%;
height: 100%;
margin: -20px 0;
position: relative;
padding: 20px 0;
}
.rightcell {
background-color: #f00;
display: table-cell;
width:250px;
}
With a little javascript, you can do some math and calculate the height the pink div should be.
var rightD = document.getElementById('rightDiv');
var yellowD = document.getElementById('yellowD');
var middleD = document.getElementById('middleDiv');
var height = rightD.clientHeight - (yellowD.clientHeight * 2);
middleD.style.height = height + 'px';
http://jsfiddle.net/kX4UB/1/
You don't need to declare so many variables, but I did just for easy display. I just set the height to the red div's height minus the yellow div's height x2. Note, this code should be placed in js tags after these divs in the doc.