I have a web app using AngularJS and Bootstrap. In a page I want to have two components with different styles. For example:
<div ng-include="'./component/header.html'"></div>
<div ng-include="'./component/header.html'"></div>
I want these 2 divs have different styles. My question is, 1) How can I encapsulate the style code into header.html? 2) How can I use less to define the style?
Thank you in advance!
For the first question:
Why not give the 2 divs a different class and then adopt the CSS like that:
<div class="first" ng-include="'./component/header.html'"></div>
<div class="second" ng-include="'./component/header.html'"></div>
CSS:
.first table {
/* style definitions */
}
.second table{
/* style definitions */
}
Like in this Snippet
You can add an id or class to each ng-include and style under that selector with css or less. It makes no difference what preprocessor or lack of, you use.
angular.module('app', []);
function HomeCtrl() {
}
* {
box-sizing: border-box;
}
.header {
padding: 20px;
border: 1px solid #000;
}
#header1 {
background: red;
}
#header2 {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-include="'header.html'" id="header1" class="header"></div>
<div ng-include="'header.html'" id="header2" class="header"></div>
<script type="text/ng-template" id="header.html">
header
</script>
</div>
Related
First, please check my code.
<div className={styles.settingInfo}>
<header>
<h1>User ID</h1>
<p>this is for user ID</p>
<h1>Username</h1>
<p>this is for username</p>
</header>
<div>
<button type='button'>change</button>
</div>
</div>
With this code, what I'm trying to do is giving (h1)username(/h1) tag a margin-top:10px without giving className.
.settingInfo {
#include flexFullWidth;
height: 40%;
header {
#include headerStyle;
h1 {
color: colors.$BIG_TITLE;
letter-spacing: 1px;
}
}
div {
width: 35%;
padding-top: 20px;
border: 1px solid red;
}
}
I set the SCSS file like this, and was finding out how can I give a specific h1 tag a style without using className.
I know we can easily solve the problem giving just a className, but just want to figure out how can work on this differently. Thank you!
My suggestion is to just add a class but if you want to do this without it then you can use nth-child selector like so:
header h1:nth-child(3) {
margin-top: 10px;
}
You can select the first h1 using nth-child(1) in the same manner.
Mechanism I have to work with, that is not changable:
Page is rendered with some styles on them eg. class xy.
Some html is generated dynamically and injected into:
<div id="InternalContent"> /* injected here */ </div>
by CSS is applied by doing:
#InternalContent {
/* .less files here */
}
The goal is to be able to render some elements inside #InternalContent with original classes, not overwritten by #InternalContent.
I tried:
#InternalContent:not(.NotInherited) { ... }
#InternalContent:not(*:not(.NotInherited)) { ... }
and some others, but to no success.
The only way this works is if the classes themself have :not(.NotInherited).
#InternalContent .xy:not(.NotInherited) { }
but in my case there are far to many classes to change manually for this to be an acceptable solution.
Smallest (not) working example:
https://jsfiddle.net/nvhouq1k/
HTML:
<p class="xy">This to be orange</p>
<div id="InternalContent">
<p class="xy">This to be blue</p>
<div class="NotInherited">
<p class="NotInherited xy">This to be orange</p>
</div>
</div>
CSS:
.xy {
color: orange;
}
#InternalContent:not(*:not(.NotInherited)) .xy{
color: blue;
}
/* *:not(.NotInherited) */
/* :not(.NotInherited) */
Change the order of your not() selector so that it only targets .xy elements: You can try the following:
.xy {
color: orange;
}
#InternalContent .xy:not(.NotInherited) {
color: blue;
}
<p class="xy">This to be orange</p>
<div id="InternalContent">
<p class="xy">This to be blue</p>
<div class="NotInherited">
<p class="NotInherited xy">This to be orange</p>
</div>
</div>
I have html script like :
<html>
<head></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
then I want to access the div by url, if url is:
example.com#div1
I want to hide div2 and if url is:
example.com#div2
then I want to hide div1
How do I solve that with css?
It is possible through CSS using pseudo selector
<html>
<head>
<style type="text/css">
.my-div {
background-color: green;
display: none;
height: 100px;
width: 100px;
}
.my-div:target {
display: block;
}
</style>
</head>
<body>
<div id="div1" class="my-div">Div 1</div>
<div id="div2" class="my-div">Div 2</div>
</body></html>
Make sure you always hit with #div1 in url e.g. example.com/#div1 or example.com/#div2 else it will show blank page
I did this recently, don't think you can do with CSS only.
this will load correct div on page load, including when the user uses back in browser.
<script>
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash.substring(1);
changeTab(hash);
}
else {
changeTab('div1');
}
});
function changeTab(divNo) {
$('.divclass').hide();
$('#' + divNo).show();
window.location.hash = '#'+divNo;
}
</script>
if you use a button to change divs just use:
onclick="changeTab('div1');"
set your div's class attribute to a type like 'divclass'
How to target outer div based on url?
The CSS pseudo-class :target is perfectly suited to this:
div {
float:left;
width: 300px;
height: 150px;
}
#div1, #div2 {
display:none;
line-height: 150px;
color: rgb(255,255,255);
font-size: 72px;
text-align: center;
font-weight: bold;
}
#div1 {
background-color: rgb(255,0,0);
}
#div2 {
background-color: rgb(0,0,255);
}
#div1:target, #div2:target {
display:block;
}
<div>
<p>Display Div1 (but not Div 2)</p>
<p>Display Div2 (but not Div 1)</p>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
I have this HTML code:
<div data-width="70"></div>
I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:
div {
width: [data-width];
}
I saw this was done somewhere, but I can't remember it. Thanks.
You need the attr CSS function:
div {
width: attr(data-width);
}
The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):
You cant pass data attribute value directly in to css without pseudo type content.
Rather you can do this way.. CHECK THIS FIDDLE
<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>
CSS
div[data-width="a"] {
background-color: gray;
height: 10px;
width:70px;
}
div[data-width="b"] {
background-color: gray;
height: 10px;
width:80px;
}
div[data-width="c"] {
background-color: gray;
height: 10px;
width:90px;
}
Inline CSS variables are almost as declarative as data attributes, and they are widely supported now, in contrast to the attr(). Check this out:
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}
.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>
Another approach would be using CSS Custom Properties with style element to pass values from HTML to CSS.
div {
width: var(--width);
height: var(--height);
background-color: var(--backgroundColor);
}
<div
style="
--width: 50px;
--height: 25px;
--backgroundColor: #ccc;
"
></div>
<div
style="
--width: 100px;
--height: 50px;
--backgroundColor: #aaa;
"
></div>
CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:
HTML:
<div class="foo"></div>
CSS:
.foo {
width: 70px;
}
jsFiddle
I'm just having fun with this, but a jQuery solution would be something like this:
HTML
<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>
CSS
.foo {
background: red;
height: 20px;
margin-bottom: 10px;
width: 0; /** defaults to zero **/
}
jQuery
$(document).ready(function(){
$('.foo').each(function(i) {
var width = $(this).data('width');
$(this).width(width);
});
});
Codepen sketch here: http://cdpn.io/otdqB
KIND OF AN UPDATE
Not what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.
HTML
<div data-width='70'>Blue</div>
CSS
div[data-width='70'] {
width: 70px;
}
Sketch here: http://cdpn.io/jKDcH
<div data-width="70"></div>
use `attr()` to get the value of attribute;
div {
width: attr(data-width);
}
can you try this
$(function(){
$( "div" ).data( "data-width" ).each(function(this) {
$(this).width($(this..data( "data-width" )))
});
});
What is the correct way to select a link of a certain class within a body of specific class. For example my body has the class "abc" and my link has the class "efg", what would my css code look like? (I'm trying to create active links for a Magento block)
body.body_class a.link_class
This question is a bit basic - you should try to learn this stuff a bit.
You have to do some research
body.abc a.efg {
rules
}
even w3c can help you with that
You should write something like this:
.abc .efg {
/*Your CSS Rules*/
}
SEE DEMO
Check this example
<html>
<head>
<style>
.outer
{
background-color: red;
height: 40px;
margin: 10px;
}
.inner
{
background-color: blue;
height: 20px;
margin: 5px;
}
.outer .inner
{
background-color: green;
}
</style>
</head>
<body onload="loadCars()">
Check div style.
<div id="mydiv" class="inner">
</div>
</div>
<div id="mydiv" class="outer">
<div id="mydiv" class="inner"></div>
</div>
</body>
</html>
Save the above code in an html file and open it.