We Keep Coding

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
}

Why is this not changing color after scrolling? CSS/Javascript

I am creating a header that, after scrolling, does a variety of things using CSS and Javascript. I must just be overlooking something that is preventing the underline on hover from changing from black to white after scrolling. It is supposed to always be the same color as the links.
Here's the link to see: http://www.exploreloudoncounty.com/
Any ideas? Thanks!
HTML:
<a class="nav__link" href="https://www.exploreloudoncounty.com/explore">Explore</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/join">Join</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/about">About</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/contact">Contact</a>
CSS:
.nav__link {
margin-right: 1em;
font-size: 1em;
color: #000;
text-decoration: none;
transition: 0.4s;
display: inline-block;
}
.nav__link::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: #000;
transition: width .3s;
}
.nav__link:hover::after {
width: 100%;
}
.nav__link.sticky a {
margin-right: 1em;
font-size: 1em;
color: #fff;
text-decoration: none;
transition: 0.4s;
display: inline-block;
}
.nav__link::after.sticky a {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
background-color: #fff;
transition: width .3s;
}
.nav__link:hover::after.sticky a {
width: 100%;
}
JS:
if (scrollPosition > 100){
document.querySelector('.nav__link').classList.add('sticky');
}
else {
document.querySelector('.nav__link').classList.remove('sticky');
}

You should change your css to this:
.nav__link.sticky::after
This because the .sticky class is in the same element as .nav__link.
And if you want to use the a element in your styling you should put this at the front of the code, like this:
a.nav__link.sticky::after
This because the classes are located within this element so the element has to be in front.

What errors do you get if you open console (by pressing F12)?
Because if this is your complete JS, then you'll be getting scrollPosition is undefined.
The source you linked has this JS and you see they declare it at the beginning as:
let scrollPosition = Math.round(window.scrollY);
They also wrapped it in a lodash function called _.throttle, but you can acieve the same with setTimeout, it just makes sure the function gets called every now and then (here 300 milliseconds).

I would like to complement #Kjvhout answer.
That solution works only for the first link due to the wrong selector on the JS part.
In order to fix it, I would do the following:
Remove the JS altogether, if you inspect the dom, you can see that the header contains already a sticky class, so no need to add a new one to the anchors.
Rewrite the CSS to match this DOM structure, something like this should work:
.sticky .nav__link:after {
display: block;
width: 0;
height: 2px;
background: #fff;
background-color: rgb(255, 255, 255);
color: #fff;
background-color: #fff;
transition: width .3s;
}
This should solve the issue and would be a better solution as you can get rid of the unused JS part.
The reason why #Kjvhout answer was working only for the first is the JS part, your selector document.querySelector('.nav__link') is only selecting one HTMLElement, to get all the collection you should use document.querySelectorAll('.nav__link') and then iterate over this collection and apply the corresponding class.
But as I said earlier, my solution is simpler as you don't need to deal with JS.

Why isn't the hover working on child but parent?

I want some action to be performed when the child element .menuitems is hovered. Currently I've replaced the action with an alert to make it simple.
Now the problem is that when I use selector ("#result_row .menuitems"), nothing works. But if I use ("#result_row"), it works fine i.e., alert works.
Why is it so? It should work in both cases? I want the hover to work on child as well as grandchilds (.menu1).
Here's my code:
HTML
<div id="result_row"><div class="menuitems">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
<div class="clear"></div>
</div>
</div>
CSS
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clear{
clear: both;
padding: 0 !important;
}
JavaScript
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
NOTE: This code won't render fine as it is missing many other styles, parent elements etc. So I've put a screenshot to describe the problem.
Red rectangle is .result_row. Green is child, .menuitems.
EDIT:
If you want to know something else, here it is: when I use .menuitems:hover in CSS (not jQuery), the hover works.
EDIT2:
One more thing that can be important to you while answering is: The window "EMAIL" you're seing in this image is no loaded when open the main page(site). It is loaded only when I click a button on the page, and the content you're seeing in 2nd and 3rd row are loaded ALONG WITH IT, i.e., they're not static!

I entered everything you had into jsfiddle and it worked (hit F12 to see console.log)
https://jsfiddle.net/bLjmocza/
I also replaced
$("#result_row .menuitems").hover(function(){
with
$(".menuitems").hover(function(){
as that seemed to be more what you were trying to achieve in the first place

use this code:
$(document).ready(function(){
$("#result_row .menuitems").mouseover(function(){
alert("Hello");
});
});

Your problem is float in your CSS. See: http://wtfhtmlcss.com/#floats-computed-height.
The quick and diry fix ist to float the parent. But you are better off applying a clearfix to the parent. The added bonus is you can then get rid of your clear div.
Below is clearfix option:
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result_row"><div class="menuitems clearfix">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
</div>
</div>

Updated: This won't work in jQuery 1.9 onwards!
http://api.jquery.com/on/#additional-notes. Use mouseenter/mouseleave instead
A second anser as this one addresses binding handlers to dynamic elements
As you are dynamically adding elements to the page you want to use jquery's on method
Change gour jquery to
$(document).ready(function(){
$("#result_row").on(".menuitems", "hover", function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
The main difference is this will attatch the hover event handler any child of resultrow with a class of menuitems that exist now or that are added later.

How to make a strikethrough look like an x

I am trying to make a page that uses only jquery to make tabs, not jQuery UI. At the top of the page there is an h1, like this:
<h1>Jquery <del>UI</del> Tabs</h1>
I want to know if I can make the strikethrough look like an x, like this:

You could do something like this using CSS:
del {
text-decoration: none;
position: relative;
}
del:before {
color: #000;
content: 'X';
display: block;
font-family: "arial";
font-size: 1em;
font-weight: normal;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
<h1>Jquery <del>UI</del> Tabs</h1>
Essentially all it does it place an "X" on top of the text using the :before sudo selector.

Changing CSS content property dynamically

A friend of mine is renting a webshop from a company. He is able to choose from different templates, and has the ability to override the predefined CSS and add javascript snippets. He asked me to help her making several changes, but there is something I cannot deal with: the add to cart button. In the below CSS there is a "content" property that holds a predefined value. I would like to change the value of this property dinamically, based on the HTML lang attribute. Do you have any idea how could I achieve this? (I know how to get the value of the lang attribute. My problem is changing the value of the "content" property)
#add_to_cart:before {
display: block;
font-family: 'sosa';
font-size: 35px;
content: "Ä";
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: #fff;
}

Try this:
HTML:
<html lang="en">
...
<div id="add_to_cart" data-content="">example</div>
CSS:
#add_to_cart:before {
display: block;
font-size: 35px;
content: attr(data-content);
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: red;
}
JS:
$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));
You'll see that the character before 'example' changes when lang attr of <html> is changed.

Write a Javascript function that updates the CSS. Javascript can access the HTML attribute.
document.documentElement.lang