I am wanting to add a red asterisk for my required fields. So far I have tried using this:
.required-field::before {
content: "*";
color: red;
float: right;
}
<div class="required-field">Issued By:</div>
<input type="text" id="issuedBy">
But the problem is it keeps putting the asterisk too far right. I want it to be right next to the text "Status:" and "Issued By:". I tried removing the float attribute, but it then places the red asterisk in front of the text.
Rather than ::before use ::after and remove the float: right.
::before places a pseudoelement before the element you're selecting. ::after will place it after, so rather than putting the asterisk before the element you want and moving it with a float/position you can just place it after naturally.
The reason the asterisk was moved too far to the right is because floating moves the element to the right side of the parent container (not always the parent element, let me know if you want me to elaborate). So by floating right you were telling it to move to the far right of the label container which means just to the left of the text boxes, and not to the right of the label text.
https://jsfiddle.net/h4depmdf/1/
.required-field::after {
content: "*";
color: red;
}
Hey you are floating the asterisk to right
instead use
.required-field::after {
content: "*";
color: red;
margin-left:2px
}
You are using pseudo ::before selector which is placing the content before the element. Use pseudo ::after to place it after the element.
.required-field::before {
content: "*";
color: red;
}
<html>
<form id="nonUsSafety" method="post">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">Status:<span class="required-field"></span></div>
<div class="divTableCell"><input type="text" id="statusNonUs"></div>
</div>
<div class="divTableRow">
<div class="divTableCell">Issued By:<span class="required-field"></span></div>
<div class="divTableCell"><input type="text" id="issuedBy"></div>
</div>
</div>
</div>
</form>
</html>
Related
Here is an example that I do not understand:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?
I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:
<div class="container_12">
<div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
<div class="grid_8">460px Wide</div>
</div>
As for the commas, it's applying one rule to multiple classes, like this.
.blueCheese, .blueBike {
color:blue;
}
It's functionally equivalent to:
.blueCheese { color:blue }
.blueBike { color:blue }
But cuts down on verbosity.
.container_12 .grid_6 { ... }
This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.
.container_12 > .grid_6 { ... }
Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.
.container_12, .grid_6 { ... }
A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.
Not exactly what was asked, but maybe this will help.
To apply a style to an element only if it has both classes your selector should use no space between the class names.
For Example:
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.
Therefore
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.
The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.
The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.
Hope I have helped.
You have four classes and two selectors in your example:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.
For example:
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>
The above means that you are applying styles to two classes, indicated by the comma.
When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.
in the example:
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>
The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.
A statement like
#admin .description p { font-weight:bold; }
Would only apply the bold to tags within areas that have class "description" that are inside of an area with id "admin", such as:
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>
Selectors combinations get different meanings - attached image explains easily
a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements.
div,.elmnt-color {
border: 1px solid red;
}
Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.
<!-- comma example -->
<div>
Red border applied
</div>
<p class="elmnt-color">
Red border applied
</p>
b) Multiple selectors separated by space – Those are called descendant selectors.
div .elmnt-color {
background-color: red;
}
Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.
<!-- space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border applied
</p>
</div>
c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.
div.elmnt-color {
border: 1px solid red;
}
Here border style is applied only to DIV elements with a CSS class of .elmnt-color.
<!-- no space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border NOT applied
</p>
</div>
<div class="elmnt-color">
Red border applied
</div>
Details are attached at https://www.csssolid.com/css-tips.html
Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
width:460px will be only applied to .grid_6 and .grid_8
Edit: Here is a very good article for you
http://css-tricks.com/multiple-class-id-selectors/
I have the following structure .. I would like to remove div.son but keepdiv.grandson, is that possible ?! or changing your <tag> would also be a solution .. ex: changing from <fieldset> to a <div>, remembering that I do not have access to HTML, every change must be done using ** javascript **!
<div class="father">
<fieldset class="son">
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
</fieldset>
</div>
I tried to use the removeChild () function of ** javascript **, but it removes the entire element.
It's possible with vanilla JavaScript by deep cloning the node of grandson before removing anything else. and then appending it back to the parent. Of course if you want to place it somewhere else, you need to append needed logic of DOM traversing. (CSS section is only for visual validation of the result)
const grandson = document.querySelector('.grandson');
const father = grandson.closest('.father');
const clonedGrandson = grandson.cloneNode(true);
father.querySelector('.son').remove();
father.appendChild(clonedGrandson);
.father {
background-color: red;
padding: 20px;
}
.son {
background-color: blue;
padding: 20px;
}
.grandson {
background-color: green;
padding: 20px;
}
<div class="father">
<fieldset class="son">
<div class="grandson">
<p>Save me</p>
</div>
</fieldset>
</div>
You may take a look at this answer, try to use the search bar next time.
https://stackoverflow.com/a/170056/10944905
In case you just want to jump all over the answer.
var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);
I have the following snippet directly inside the body tag:
<div id="container">
<div class="section profile">
<div class="row">
<div class="col-sm-6">
A
</div>
<div class="col-sm-6">
B
</div>
</div>
</div>
<div class="section technical">
</div>
</div>
My CSS file if it is neccessary:
body {
background-color: #808080;
}
.section {
}
.section.profile {
background-color: #2980b9;
}
.section.technical {
background-color: #bdc3c7
}
However, when I use FullPageJS, the result is like this:
(note: their are thin lines at the left and right)
The problem only happens if I use row div. It also happen if I wrap the row by another div. Also, the problem disappear if I resize the browser window.
This is how I call the script, just like the documentation:
<script>
$(document).ready(function () {
$("#container").fullpage();
});
</script>
I'm not pretty sure what are you expecting to happen, but check this:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
The container must be a class, not an id, but this also will add some padding to the sides.
Also, you should move the .row class to the upper level id and delete the current one with the .row class in it, the row <div> can have both classes without any problem.
I'm building a drawing app, and I want a cursor in form of circle. I searched HTML5 style to make cursor default, pointer etc, but I need it to be a circle. How can I do this?
What you want can be done by CSS.
Check out the following snippet and this jsfiddle
#circle64 {
cursor: url('http://www.iconsdownload.net/icons/64/16574-black-circle.png'), pointer;
}
#circle32 {
cursor: url('http://www.iconsdownload.net/icons/32/16574-black-circle.png'), pointer;
}
#circle24 {
cursor: url('http://www.iconsdownload.net/icons/24/16574-black-circle.png'), pointer;
}
<div id='circle64'>
Cursor will
<br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle32'>
Cursor will
<br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle24'>
Cursor will
<br>be</br>different here.
</div>
you can use an image as cursor, by using this css property
cursor: url(images/my-cursor.png), auto;
for example if you have some input and you want to show round cursor on it , you should use png image
input{
cursor: url(images/my-cursor.png), auto;
}
check this jsfiddle
http://jsfiddle.net/pwy51Ly8/
From this link
"It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px"
You can use CSS cursor wait
div {
cursor: wait;
}
or
div {
cursor: url("your custom cursor image"), auto;
}
I want to hide the text First Text only, using (opacity:0) when I mouse over the topblock.
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
But I When i use following jQuery code i am getting child DIV text also First Text Inner Text
$(".topblock").on("mouseenter",function(){
console.log($(this).text());
$(this).css({"opacity":"0"})
}).on("mouseleave",function(){
});
To do what you require without amending the HTML structure will be exceptionally difficult as you would need to amend the textNode holding the First text value directly.
Instead it would be far simpler to just amend your HTML to wrap that text in another element, such as a span, and perform the operations on that element. Try this:
<div class="topblock">
<span>First Text</span>
<div class="block">
Inner Text
</div>
</div>
$(".topblock").on("hover",function(){
$(this).find('span').toggle();
});
You can't just hide a part of a block. You can put First text in a span and hide the span when your mouse enter the topblock block
Impossible to do using opacity, but you could accomplish it by setting the color to match the background color on hover.
Here's how to achieve the effect while hovering .topblock except when hovering its .block child. Note the use of CSS !important:
$('.topblock').hover(
function() {
$(this).addClass('white');
},
function() {
$(this).removeClass('white');
});
$('.block').hover(
function() {
$('.topblock').addClass('black');
},
function() {
$('.topblock').removeClass('black');
});
.topblock .block, .black {
color: black !important;
}
.white {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>