We Keep Coding

Placeholder for contenteditable div with minimal JS

I created a div tag with the contenteditable attribute.
I want to put the placeholder in here, and I found the following code.
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
/* For Firefox */
}
<div class="test" contenteditable="true" placeholder="test"></div>
In a chromium-based engine, it looks like it's working. But I heard there is an error here that requires JavaScript. I couldn't find the error. Can you tell me what the problem is?
I'm also not sure that content:attr(); is the web standard in css. Is it a standardized CSS property?

The problem is that a <br> is automatically inserted inside a contenteditable div when it is empty. I think that they added <br> to prevent it from collapsing. Here's where they discussed this: Bugzilla.
Here's an example of the collapse prevention I mentioned. You can see that, initially, div has 0 height. However, you can still focus on it. Try typing, then erasing everything. Browser automatically inserts <br> to prevent it from returning to 0 height by adding a <br> which is one line-height high.
div {
border: 1px solid black;
}
<div contenteditable="true" data-placeholder="Test"></div>
So we can simply use <span>, which does not insert a random <br>, instead of <div> to do what you want like so. Try typing, then erasing the characters. The placeholder will be there exactly as you want it to be.
* {
box-sizing: border-box;
}
span {
display: block;
width: 100%;
border: 1px solid black;
border-radius: 5px;
font-family: sans-serif;
padding: 10px;
cursor: text;
}
span:empty::before {
content: attr(data-placeholder);
display: block;
height: 100%;
color: #00000066;
}
<span contenteditable="true" data-placeholder="Test"></span>
If you really have to use div, then you can erase the <br> manually using JS:
const editable = document.querySelector('#editable')
editable.addEventListener('keyup', e => {
if (editable.innerText === '\n') editable.innerHTML = ''
})
* {
box-sizing: border-box;
}
#editable {
display: block;
width: 100%;
border: 1px solid black;
border-radius: 5px;
font-family: sans-serif;
padding: 10px;
cursor: text;
}
div:empty::before {
content: attr(data-placeholder);
display: block;
height: 100%;
color: #00000066;
}
<div id="editable" contenteditable="true" data-placeholder="Test"></div>
Using attr() function in CSS with content is not experimental. With other CSS properties like color, though, it is still experimental. Read further on this MDN page.

In .html
<div placeholder="Write your message.." contenteditable class="form-control edit-box holder"></div>
In .css
.holder:before {
content: attr(placeholder);
color: lightgray;
display: block;
position:absolute;
font-family: "Campton", sans-serif;
}
This solution worked for me.

It works on Firefox too. I think I found the "error" that may require the supposed Javascript. Try typing in the div, then delete all of it by CTRL+A backspace; the placeholder won't come back because there's a <br> the browser has automatically inserted (<p></p> in other browsers).
The content property and attr(...) has been standard since IE8, so it's fine.

Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.

You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ

You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.

Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}

If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}

Implementing a parent selector in CSS with jQuery that applies automatically to new elements in DOM

CSS does not support parent selectors, e.g. "select all <p> that contain an <img>".
One solution proposed here is to use jQuery, for example:
$('#parent:has(#child)').addClass('my-special-class');
However, I have a <div> that is periodically updated with new content, and I need to keep reapplying the my-special-class to new elements that match the selector '#parent:has(#child)' inside that <div>.
How could one do that?
I am styling a third-party plugin so I don't have much control over its styling, events and so on.

One solution is to bind the DOMSubtreeModified event on the container div and add your code inside.
$('.container').on("DOMSubtreeModified",function(){
$('.parent:has(.child)').addClass('special-child');
});
// find elements
var parent = $("#parent")
var button = $("button")
// handle click and add class
button.on("click", function() {
const el = '<div class="parent"><p class="child">Hello World</p></div>';
parent.after(el);
})
$(function() {
$('.parent:has(.child)').addClass('special-child');
$('.continer').on("DOMSubtreeModified", function() {
$('.parent:has(.child)').addClass('special-child');
});
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.child {
background: #fff;
border-radius: 4px;
padding: 10px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 4px auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.special-child {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="continer">
<div class="parent" id="parent">
<p class="child">Hello World</p>
</div>
</div>
<button>Add Child</button>

If you add the following jquery and just one class, it will work like :visited:
$("div.my-div").click(function(){
$(this).addClass("visited");
});
And just add one class to the css:
.visited:hover{
outline: 2px solid orange;
}
If you add this code with the current code of yours, you will get the same functionality as the one for :visited.
Here is a fiddle that I tried on your code:
https://jsfiddle.net/thisisdg/27srmuy6/

Emulate CSS hover:before and hover:after behavior tooltips for touchscreens

I have a very nice CSS-only hover tooltip solution like so:
Works great on non-touchscreens but on touchscreens a click shows the tip and it never hides. I am trying to get a toggling solution which keeps the work I have done and adds a touchscreen jQuery or CSS solution to show and hide the tooltips. I'd like to have the show/hide toggle on click but a solution with delay() would also do.
I have read
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
Access the css ":after" selector with jQuery
How to modify programmatically with javascript the css ::before and ::after
Here is the current code
JS added today to try to resolve for touchscreens:
$('.tooltip').click(function() {
$(this).addClass('tooltipBefore tooltipAfter').delay( 800 ).removeClass('tooltipBefore tooltipAfter');
});
HTML
<a href="#" class="tooltip" title="Putts per round is the average number of putts per round played." >
<span title="Info"><img src="/g/inputs/help.png"></span>
</a>
CSS - modified today to add .tooltipBefore .tooltipAfter which I also tried with :before and :after selectors added
.tooltip{
display: inline;
position: relative;
background:none;
border:none;
}
.tooltip:hover:after, .tooltipAfter:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before, .tooltipBefore:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
EDIT 2
Revised JS per #maioman answer to below. Console log i verifying that the correct element is being selected by $(this) but in Chrome inspector the class flashes but is never modified by addClass or removeClass. Also tried toggleClass but class is not added.
END EDIT 2
console.log($(this).attr("Title"));
$(this).addClass('tooltipBefore').addClass('tooltipAfter').delay( 3000 ).removeClass('tooltipBefore').removeClass('tooltipAfter');
EDIT 3
OK, so edit #2 has issues with how I call the addClass and removeClass. This version works in browser but and toggles class correctly but still does not work on phone:
$('.tooltip').bind( "click touchstart", function() {
$(this).toggleClass('tooltipBefore tooltipAfter');
});
END EDIT 3

try changing this
$('.tooltip').click( function () {
to
$('.tooltip').on('click touchstart', function () {

applicationcraft style properties

I will try to apply css style for applicationcraft textbox. If I change directly in applicationcraft, it is working. Instead of that If I have upload css code and gave that css class name in custom css class, its not affecting on textbox. I following code I am using,
.textbox {
font-size : 26px !important;
font-family : Verdana;
z-index: 2;
box-sizing: border-box;
border-radius: 0px;
border: 1px solid rgb(232, 26, 26);
display: block;
position: absolute;
outline: none;
overflow: hidden;
min-width: 200px;
min-height: 22px;
top: 88px;
left: 128px;
background-color: rgb(247, 247, 247);
}
I have given that class name "textbox" in custom css class. But it is not working. Will you please tell me how can I give css style to textbox.
Please look at the image. Here I have mention the class name in corresponding place. Next I have saved the file and check the result in live. The style is not affecting in textbox. How to give the style to textbox