I have the following HTML Code on page 1
<body class="page-template-default page page-id-23">
<header class="nav_header">
</header>
</body>
And the following HTML Code on page 2
<body class="page-template-default page page-id-22">
<header class="nav_header">
</header>
</body>
And the following CSS
header.nav_header:not(.page-id-23) {
background-color: rgba(255,255,255,0)!important;
}
I am trying to place the background color on every page except the one with page-id-23 in the body class however have not had success with my current CSS
You are looking for a css class selector on the nav_header element (where it isn't), instead of the body element (where it is). You want this:
body:not(.page-id-23) header.nav_header {
background-color: rgba(255,255,255,0)!important;
}
Related
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
How can I use component variables within style TAG in Angular 2?
I do have an Angular 2 component for my header which I like to color depending on a users setting. Thus I'd like to assign an background and font color. While I know how to to this with an attribute binding to an element, I couldn't figure out how to use in a style tag.
Using attribute binding for style works well, however this gets pretty anoying for several subelements, especially if they are nested within other sub components. [ngStyle]= attribute is also only working on a single element.
<header id="header" [style.background-color]="changeBackground()">
<div>
Some Text
Some Link
<subcomponent></subcomponent>
</div>
<div> ... a lot mor stuff </div>
</header>
Thus I'd like to add something like
<style>
#header, #header a {
color: {{mycolor}};
}
</style>
to the html template. However this is not working
Similar Questions do not answer this question yet and only show attribute binding as a solution:
Angular2 dynamic change CSS property
Dynamically updating css in Angular 2
https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components
https://coryrylan.com/blog/introduction-to-angular-2-ngclass-and-ngstyle
It looks to me like you are just creating a new component called 'subcomponent', why not do that?
subcomponent.ts:
import { Component } from '#angular/core';
#Component({
selector: 'subcomponent',
templateUrl: './subcomponent.html',
})
export class SubComponent {
mycolor = 'blue';
}
subcomponent.html:
<style>
#header, #header a {
color: {{mycolor}};
}
</style>
To your #Component object, add
styles:[ `#header, #header a {
color: {{mycolor}};
}`]
So for example:
#Component({
template: `<header id="header" [style.background-color]="changeBackground()">
<div>
Some Text
Some Link
<subcomponent></subcomponent>
</div>
<div> ... a lot mor stuff </div>
</header>`,
styles: [ `#header, #header a {
color: {{mycolor}};
}`
`]
})
Use NgStyle as explained in this answer
https://stackoverflow.com/a/41903349
in short
<header id="header" [ngStyle]="getStyle()">
<div>
Some Text
Some Link
<subcomponent></subcomponent>
</div>
<div> ... a lot mor stuff </div>
</header>
and
getStyle(): any {
return {"background-color" : this.changeBackgroundColor()};
}
As an example, i have 3 html which is login.html, home.html, and contact.html. all 3 of them have banner coded like so:
.
.
<div id="banner" class="banner" >
....
</div>
.
.
and they also called a css file which contains the following
.
.
.
.banner {
background: url("images/image1.jpg");
}
.
.
i want to set image1.jpg background only for home.html and contact.html. ignore the css if the page is login.html . Is it possible by only adjusting the css file?
to make it clear, i want to do something like this:
.banner{
if(page != login.html)
background: url("images/image1.jpg");
else
ignore;
}
You have two options:
Add a class to the <body> tag or the particular element.
Add an additional style sheet to overwrite the default styles.
If you can give the body a class login for the login.html:
<body class="login">
<div id="banner" class="banner">
....
</div>
</body>
You can overwrite the styles by adding like:
.login .banner {background: none;}
If you can modify the HTML, you could also add a another class to your banner and reference it by id in your CSS. Something like:
HTML
<div id="banner" class="banner home" >
....
</div>
CSS
#banner.home {
background: url("images/image1.jpg");
}
#banner.login {
background: url("images/image2.jpg");
}
I'm having an issue coloring a span with css. Everything is working fine on the webpage however when I try to select a span in a div it doesn't work. Am I missing something dumb here?
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="style/mainstyle.css" rel="stylesheet" type="text/css">
<script src= https://code.jquery.com/jquery-latest.min.js></script>
</head>
<body>
<header>
<h1>TEST</h1>
</header>
<main>
<div class = "tab1 triad">
<script src="primejs.js"></script>
<span class="red"><h2>Type in a number and I'll check if it is prime:</h2></span>
<input class = "primeNum" type = "text">
<button class = "submit">Submit</button>
<span class = "result">
<h2>What I found: <span class = "answer">?</span></h2>
</span>
</div>
</main>
</body>
and here is the css:
.tab1 span.red {
color: RED;
font-size: 100;
}
Cleaned up your HTML, you had a some stray and missing tags.
Bin demo
<div class="tab1 triad">
<span class="red">
<h2>Type in a number and I'll check if it is prime:</h2>
</span>
<input class="primeNum" type="text">
<button class="submit">Submit</button>
<span class="result">
<h2>What I found: <span class="answer">?</span></h2>
</span>
</div>
And your css was missing the px after 100
.tab1 span.red {
color: red;
font-size: 100px;
}
try this
.red {
color: red;
font-size: 100px; /* specify a unit like px, em, ... */
}
First of all, the HTML code you have posted is not valid. You can use the official W3C validator to check if you like. The main issue is the spaces either side of your = when declaring attributes. Spaces are only ever used in between different attributes. Also, h2 elements are block type elements, and are therefore not allowed inside of an inline element (e.g., span).
Secondly, the CSS is also not all valid. Firstly, there is no need to make anything uppercase, as is shown for the colour name. color:red; will work just fine. Also, you have not specified any units of measurement for the font-size property. I assume you intended for the text to be at 100pt, in which case you need to use font-size:100pt;. Other valid units of measurement include px, cm and rem.
I recommend you read information on the Mozilla Developer Network for examples if you would like to learn more. It includes accurate pages about HTML elements, CSS properties and JavaScript.
Edit:
The following would help to fix the HTML:
Change doctype to DOCTYPE, which improves compatibility.
Move all script tags into the head tag.
Ensure that all inputs, buttons, etc. are inside of form elements.
Remove spaces around = signs.
Make the href attribute of the stylesheet link tag the second attribute, and make the rel attribute the first. This is primarily for consistency.
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>