I have two elements (<a> and <button>), both of which are sharing the same classes from Tachyons:
<a class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1 " href="/edit-profile/photos"
>Confirm account</a>
<button class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1 " type="submit">Next</button>
The expected behaviour is that they will both be the same width, and yet they're different (despite the same styles).
Any idea what's going on here?
Here's a Codepen demonstrating the issue.
In your particular case the button has a border and a different font, which is a default style for your browser. Each browser have it's own defaults for every type of elements, that's why a button and a link would look the way they do without any styling. In a matter of fact it isn't right to say "without any styling", it is rather "without any additional styling":
<button>I'm a button</button>
I'm a link
I didn't go through all the css you have, because you have 17 classes for a single element and I'm too lazy for it, but it actually possible to have different styles for different elements with a common class:
.awesome {
display: inline-block;
border: 5px solid;
width: 200px;
box-sizing: border-box;
padding: 20px;
text-align: center;
margin: 10px 0 10px 10px;
font-family: Arial, serif;
}
div.awesome {
background-color: deepskyblue;
border-color: royalblue;
font-style: italic;
color: darkslateblue;
}
span.awesome {
background-color: orangered;
border-color: firebrick;
font-weight: bold;
color: gold;
}
<div class="awesome">I'm a div</div>
<span class="awesome">I'm a span</span>
Related
I have a custom cursor image for my website, but only for the default status. In the rest of cases (specially for text) I want the predefined ones.
But if I define the custom cursor this way...
html {
cursor: url('path/to/custom/cursor.svg') 0 0, default;
}
at least text status is lost (not pointer, but I suspect others have been lost as well) and my paragraphs, spans with text, headers, etc. show now my custom cursor instead of the predefined text selector one.
Of course, I could redefine styles for certain elements...
p, span, ol, ul, h1, h2, h3, h4 {
cursor: text;
}
but text status is not really linked to certain html tags, it appears when there's a text node not affected by other modifiers. For example, how can I target a div with only text, but exclude a div that contains just another div of certain color, background, etc.?
As I see in this question there's not a way to target text nodes directly, so I want to know if there's a less invasive way to define a custom cursor only in the case where the predefined default one would appear, and still showing all the predefined cursors by every modified state (text, scroll, etc.)
Thank you in advance.
Example 1: if html cursor defined, all is overridden:
html {
cursor: all-scroll;
}
Lorem ipsum dolor sit amet
Example 2: if we try to redefine some elements, we have now false positives...
html {
cursor: all-scroll;
}
/* Dillema: Which elements should be redefined to target predefined text status?? */
div {
cursor: text;
}
<div>Lorem ipsum dolor sit amet</div>
<div style="width: 100px; height: 100px; background-color: red;"></div>
TL;DR;
You can't strictly change the meaning of cursor: default; but you can style any element setting its cursor as desired.
So if you mean to address some particular elements or element types in general, you should select them pinpointing the elements with a fine grained selector (like: .classname{cursor: all-scroll;} or elementtype{cursor: all-scroll;}) but there's no selectors for element having a given property set at a given value.
If you want to get wild you may do in js:
//for every single element in the dom,
document.querySelectorAll('*')
//sets the cursor property to all-scroll if its current value is default
.foreach(el=>{ if (el.style.cursor === 'default') el.style.cursor = 'pointer'})
to set the style property of every single html element in the document that it will take the max priority.
But to just take them all via css this will be enough *{cursor: pointer;}
If you do html{cursor: all-scroll;} you won't be granted that every single elements will be styled like that because some element types don't inherit the cursor property value from its parent/ancestor and when the mouse will be over it, its style will take the precedence over the underlying html "canvas".
Anyway at a bare minimum you should set the html height at 100% in that case to make sure that that rule at least will trigger when no other element on the top layer where overriding the behaviour.
In my demo I show the 2 strategies at play and I easily demo the fact that form elements don't inherit from the parent ancestor and that when the rule is applied with *, it takes it all.
The whole story:
Here's the mdn docs about the cursor css property:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
The cursor CSS property sets the mouse cursor, if any, to show when
the mouse pointer is over an element.
The cursor setting should inform users of the mouse operations that
can be performed at the current location, including: text selection,
activating help or context menus, copying content, resizing tables,
and so on. You can specify either the type of cursor using a keyword,
or load a specific icon to use (with optional fallback images and
mandatory keyword as a final fallback).
It's clear that such property will affect the cursor when the mouse pointer is over the element styled like that. So to affect every elements under the root umbrella it's enough to style the whole <html> element but it's also important to make sure the visible height covers the actual viewport!
That's why it was a solution to use html { height: 100% } for example.
It should be noted that an html document has always a root element and that's <html>. Any text content is always a textNode and anywhere you find it inside the page is always the content of some node and at worst it's a child node in the body element. All I said so far it's maybe ignoring text coming from the content css property (but let's pretend it doesn't exist).
So of course you can't style the text itself but you can style the element containing it, since there's always such an element, therefor there's always a selector you can use to style a given text that for sure will be contained in some element that you can address. The only concern is that you CAN'T limit the styling to the text alone, but to the whole content of the element you are going to style.
Now the only added thing to know is that some elements will have some default values for some css properties that will override any value set on a parent element. That's because of how css specifity works and how some properties get inherited from the ancestors.
I made a demo that includes several html element types.
Plus there are two buttons:
Toggle custom cursor on html - That will toggle the css class
custom .customcursor on the html element (the rule is predefined in the document as .customcursor{cursor: all-scroll !important;})
Toggle custom cursor on * - That will add/remove a css rule that will set the cursor css property to ALL elements in the DOM (*{cursor: all-scroll !important; .. the reason why I behaved this way is to leave to css the responsability to select ALL the elements instead of using js with querySelectorAll)
It's worth pointing out that I used !important to show off that it won't be enough to override the cursor property for those element types that don't inherit from parent.
When you'll set the customcursor on html you'll see that mostly
all the elements take the customization except the form elements.
When you'll set the rule that targets ALL the elements, it will
affect EVERYTHING and that cursor will be the only one you'll see
while hovering on the whole page viewport.
//create the empty stylesheet on document loaded
var styleSheet;
document.addEventListener('DOMContentLoaded',()=>{
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
});
function toggleCustomCursorOnBody(btn){
const cb = btn.querySelector('input');
document.querySelector('html').classList.toggle('customcursor');
cb.checked = !cb.checked;
}
function toggleCssRuleOnAllElements(btn){
const cb = btn.querySelector('input');
if(!cb.checked)
addCssRule();
else
removeCssRule();
cb.checked = !cb.checked;
}
function addCssRule(){
styleSheet.insertRule('*{cursor: all-scroll !important;}', 0);
}
function removeCssRule(){
styleSheet.deleteRule(0);
}
html {
border: solid 18px purple; /*<--this is to show the size of the element we are setting cursor for! */
background: lightgoldenrodyellow;
height: calc(100% - 36px); /*<--this was what I pointed out in comments */
}
.customcursor{
cursor: all-scroll !important;
}
/*the following just to give consistence to the page elements*/
[data-label]::before{
content: attr(data-label);
padding-right: 1em;
font-weight: 600;
padding: 0 .2em;
font-size: 1rem;
background-color: #FECE44;
color: #333;
width: 100%;
max-height: 1.2rem;
}
.toggles{
margin: 0 auto 1em auto;
}
.toggle{
cursor: pointer;
padding: .5em 1em;
}
.toggle > input[type="checkbox"]{
pointer-events: none;
}
body{
font-size: 18px;
text-align: center;
}
*{
box-sizing: box-model;
border: dotted 1px lightgray;
}
.container,
form
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 2vmin;
}
body > .container{
margin-top: 2vh;
}
.container > h1,
.container > h2,
.container > h3,
.container > h4,
.container > h5,
.container > h6
{
margin: 0;
max-height: 10vh;
}
.container > h1{
background: rgba(204, 204, 204, 1);
}
.container > h2{
background: rgba(204, 204, 204, 0.9);
}
.container > h3{
background: rgba(204, 204, 204, 0.8);
}
.container > h4{
background: rgba(204, 204, 204, 0.7);
}
.container > h5{
background: rgba(204, 204, 204, 0.6);
}
.container > h6{
background: rgba(204, 204, 204, 0.5);
}
.container > p{
background-color: lime;
font-size: 2rem;
margin: 0;
}
.container > ol{
background-color: cyan;
font-size: 1rem;
padding: .5em 1em .5em 1.5em;
margin: 0;
height: fit-content;
}
.container > a{
background: antiquewhite;
font-size: 2rem;
height: fit-content;
margin: 0;
}
.container > div:not(.container):not(.unstyled) {
width: 20vw;
height: 5vh;
background: dodgerblue;
color: white;
padding: 1em;
font-weight: 600;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.container > span {
width: 20vw;
height: 5vh;
background: cadetblue;
color: white;
padding: 1em;
font-weight: 600;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.container > textarea{
width: 15ch;
height: 10vh;
}
.container > label{
outline: solid 1px gray;
padding: .2em 1em;
background: gray;
color: white;
max-height: 1em;
}
.container > select{
max-height: 2em;
}
.container > input{
}
.container > input[type="text"]{
width: 15ch;
max-height: 1em;
font-size: 1rem;
padding: .5rem .5rem;
}
.unstyled input[type="checkbox"]{
position: relative;
width: 2em;
height: 2em;
}
.unstyled input[type="checkbox"] + label{
}
<body>
<div class="toggles">
<button id="toggle1" class="toggle" onclick="toggleCustomCursorOnBody(this);">
Toggle custom cursor on <html>
<input type="checkbox">
</button>
<button id="toggle2" class="toggle" onclick="toggleCssRuleOnAllElements(this);">
Toggle custom cursor on *
<input type="checkbox">
</button>
</div>
[THIS IS A TEXT NODE HAVING FONT SIZE FROM BODY]
<div class="container">
<div class="container" data-label="headings">
<h1><h1></h1>
<h2><h2></h2>
<h3><h3></h3>
<h4><h4></h4>
<h5><h5></h5>
<h6><h6></h6>
</div>
<div class="container" data-label="contents">
<p><p></p>
<ol>
<li><ol> <li></li>
<li><ol> <li></li>
<li><ol> <li></li>
</ol>
<a>
</div>
<div class="container" data-label="layout">
<div><div></div>
<span><span></span>
</div>
<form class="container" data-label="form">
<label><label></label>
<input type="text" value="<input type=text>">
<textarea><textarea></textarea>
<div class="unstyled">
<input type="checkbox">
<label><input cb></label>
</div>
<select>
<option disabled selected><select>...</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<fieldset>
<legend><legend></legend>
<div>
<input type="radio" checked>
<label><radio></label>
</div>
<div>
<input type="radio" checked>
<label><radio></label>
</div>
<div>
<input type="radio" checked>
<label><radio></label>
</div>
</fieldset>
</form>
</div>
</body>
I'm trying to get a second sibling element displaying in front of the first - with some severe restrictions:
I cannot alter the HTML or use javascript or jQuery.
I can only use CSS.
I can't change how classes are assigned (again, I don't have access to change any code apart from the one bespoke CSS file).
The left-hand menu features a number of the above HTML structures, building a clickable menu for the sections on the page. When a page section is completed, the 'completed-section' class is added to the first span (as shown above). This is what is causing me problems:
The CSS styling of the nav-link 'button' should change when it's completed, but since I can't access the parent of a CSS-selected element I need to make these changes directly to the 'menu-number' span element, including a 'nav-link' sized background colour. So I've made the menu-number the same size as the containing 'nav-link' . But when I add a background colour to the 'menu-number' , the text in the second is obscured.
How can I 'move' the second span in front of the first so I can see its text?
I have also tried making both spans position absolute or position relative and used z-index but this pulls the spans out of the flow of the document and means the width of the menu collapses. I can't set the width to a hard-coded value because the menu toggles open and closed, width-wise, (without a class being set) and the toggled width is set by javascript which, again, I can't access.
I have also tried using display: flex on the 'a' element and reversing the 'order' of span elements. No luck.
In semi-desperation I have tried setting the direction property on 'nav-link' to rtl. No luck.
I think I've tried a couple other things too, but at this point I'll wrap this question up.
Any pointers, much appreciated...
.menu-number {
border: none;
border-left: 10px solid transparent;
border-radius: 0px;
padding-top: 13px;
padding-left: 20px;
height: 45px;
position: absolute;
width: 100%;
text-align: left;
z-index: 100;
float: left;
}
.menu-number + span {
/*position: absolute;*/
padding-left: 40px;
z-index: 200;
}
.completed-section {
color: #42bb76 !important;
border-left: 10px solid #42bb76;
background-color: #274d56;
text-decoration: underline;
}
.nav-link > div > a {
display: flex;
*/flex-direction: row-reverse;*/
}
.nav-link > div > a > span:nth-of-type(1) {
order: 2;
}
.nav-link > div > a > span:nth-of-type(2) {
order: 1;
}
.nav-link > div > a > .section-name {
color: white;
padding: 13px 20px 0px 60px;
height: 45px;
float: left;
}
<div class="nav-link">
<div>
<a href="scroll/to/section">
<span class="menu-number completed-section">1.</span>
<span class="section-name">Section name</span>
</a>
</div>
</div>
I've also tried 'flex-direction' but I've now commented that out.
You can achieve this using CSS order property:
Here is the fiddle:
.menu-number {
order: 2;
}
.section-name {
order: 1;
}
.nav-link a{
display: flex;
}
<div class="nav-link">
<div>
<a href="scroll/to/section">
<span class="menu-number completed-section">1.</span>
<span class="section-name">Section name</span>
</a>
</div>
</div>
I have a blog and am using the CSS float feature for highlighted text in boxes within my article. So, if there is an important sentence or two in my article, I showcase that within a text box using float.
For many of my readers, this displays correctly. But some of them say that the text that is supposed to be inside a highlight box appears as inline text, and so they complain that I have repetitions in the article.
Why is this happening? I thought that in html, if the browser does not understand something, it is supposed to ignore it. So, in this case, I would have thought that if their browser did not support CSS, etc., then it should have simply ignored the text in the highlight boxes, not reproduced them as plain text.
This is the CSS code I am using:
#boxedquote {
float: right;
width: 45%;
margin: 0.5em 0em 0.5em 2em;
padding: 0.1em 1em 0.1em 1em;
border: 4px solid;
border-color: Gold;
border-radius: 10 px;
font-size: 120%;
font-style: italic;
font-weight: bold;
}
#boxedHighlights {
color: #556B2F;
}
This is an example of how it is used:
<div id="boxedquote">
<div id="boxedHighlights">
<p>
The possibility of a romance of a Muslim “villain” with a Hindu queen being depicted on screen, even as a fantasy, as has been rumoured, infuriates Hindu right-wing groups.
</p>
</div>
</div>
This is my blog page:
http://www.leftbrainwave.com/2017/11/why-indian-civilization-should-be.html
I'm trying to build a HTML/CSS periodic table. I have this as my HTML code:
<div id="Hydrogen">
<p>1</p>
H
Hydrogen
1.00794
</div>
and this is my CSS code:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}
#hydrogen {
background: #fff;
margin: 0 auto;
width: 50px;
padding: 30px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
position: absolute;
}
How do I target the <p>1</p> tag in my #hydrogen ID? Basically, I want to display a 1 on the top-left corner of the div cell. Also, is this the best method of doing this, or is there a easier way?
If it’s the only p element within that div, then sinply
#Hydrogen p { … }
Otherwise, if it’s the first one,
#Hydrogen p:first-child { … }
This are absolute CSS selector basics – so you should perhaps read some tutorials on that matter.
Something along the lines of
#hydrogen p { position:absolute; left:0; top:0;}
should get you started.
You can also use the command "span".
Example:
<p><span>1</span></p>
CSS:
span { font-size:14; }
You can expend this code with "id" or "class".
ID-Example:
<p><span id="name">1</span></p>
CSS:
#name { font-size:14; }
Class-Example:
<p><span class="large">1</span></p>
CSS:
.large { font-size:14; }
There is nothing wrong with:
#hydrogen p{..}
but as you said you want to do periodic table so you will have 103 elements so than for every p-element you will have to write:
#hydrogen p{..}
#helium p{...}
#lithium p{...}
... and so 103 times, same thing with divs with Id's
Better solution would be to give p and div class name
.atomic-number{...}
.grid-cell{...}
<div class="grid-cell">
<p class="atomic-number">1</p>
H
Hydrogen
1.00794
</div>
You can style all elements with just two lines of CSS
EDIT
Create rows, and position elements inside them.
For example float all grid cells left, if you need something to stick on the right side add class="right" (1st row) you probably will have to change colours same way, also you can create invisible cells and fill space with them (2nd row)
http://fiddle.jshell.net/tH7Pq/1/
If you want you can read more about classes, id's and selectors here:
Id's and classes
multiple classes
child-and-sibling
I have this html:
<div>
<input class="orderrow-1" type="text"></input>
<input class="orderrow-2" type="text"></input>
</div>
and this css:
input[class^='orderrow-']
{
border: 1px solid #e2e2e2;
color: #333;
font-size: 1em;
margin: 5px 5px 6px 0px;
padding: 5px;
width: 100px;
text-align: right;
}
I try to style all input fields with a class that begins with 'orderrow-' but above doesn't work. Any suggestions?
Edit: Sorry, above does work. The problem is that I have two casses. Like this:
<div>
<input class="trigger orderrow-1" type="text"></input>
<input class="trigger orderrow-2" type="text"></input>
</div>
The selector doesn't work when there is something before orderrow-1. Ideas?
The problem is that your using a prefix match ^= which means it will match the value of the class attribute (which includes ALL class names) which begin with orderrow- The actual value of the class attribute it 'trigger orderrow-2' if you want a wildcard selector the specification reccomends this: *= it looks for a value that contains the string at any point.
example:
input[class ^="orderrow-"], input[class *=" orderrow-"]
{
border: 1px solid #e2e2e2;
color: #333;
font-size: 1em;
margin: 5px 5px 6px 0px;
padding: 5px;
width: 100px;
text-align: right;
}
input.orderrow-1 {
border: 1px solid #F00;
}
it is important to note that because attributes selectors and clas selectors have the same specificity you should place the overribe below the attribute to ensure proper cascadence* of the styles (as per my example - jsfiddle).
EDIT: as per comments to use more precise selectors in the example.
docs see the docs for the three different wildcard selector.
*I sometimes make up words, but so long as you get my meaning...
it should be fine check out my code pen test of various css3 pseudo classes here http://codepen.io/jamiepaterson/pen/cADfs
The one you want is the purple text color on this test.