On this site https://www.nycofficesuites.com/new/, I want to change the color of the top bar on the homepage only. I have tried this code:
.home .page .page-id-94 .page-template .page-template-template-home .page-template-template-home-php .wood .top-bar {
background:blue;
}
as well as this code:
.page-id-94 .top-bar {
background:blue;
}
Neither work. Thanks for your help.
I checked your website, and there're a huge hoard of classnames on one body element.
Problem: There're spaces in all your selectors.
.class1 .class2 selects an element with a classname of class2 that's the child of an element with the classname class1.
.class1.class2 has no spaces in the selector, so it selects one element with both classnames of .class1 and .class2.
Correction:
.home.page.page-id-94.page-template.page-template-template-home.page-template-template-home-php.wood .top-bar {
background:blue;
}
OR:
.page-id-94 .top-bar {
background:blue;
}
There's a space before the last selector because .top-bar is a child of the body element.
Hope that helps!
Give this a try:
.home header.style-4 .top-bar {
background: #YOURCOLOUR;
}
If it's a single page you could just set the style with !important
<div style="background:red!important;">
<p>Example</p>
</div>
Related
On this answer: https://stackoverflow.com/a/1725486/2519402 to a question, it states:
It sounds like you had h1 .myClass instead of h1.myClass - there's an
important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
I don't have enough points to ask my question as a comment on that answer.
So, based on what is said above, shouldn't the following code work:
<style>
h3 .h3nobtmgn {
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes, but vertical margin styles won't work on an inline element like <strong>. http://www.w3.org/TR/CSS21/box.html#propdef-margin-top
So your CSS selector will target the correct element but the style you applied will have no effect.
For that to work you can try:
<style>
h3 .h3nobtmgn {
display: block;
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes it does.
h1.myClass would change the appearance of
<h1 class="myClass">...</h1>
And h1 .myClass would change the appearance of
<h1> ... <span class="myClass">...</span></h1>
You will see through http://www.w3schools.com/cssref/trysel.asp that when you are doing div p it will select all p inside of div. So, the answer is yes.
here is a sample: https://jsfiddle.net/r5d0kkb5/
which shows selectors for div p and div .B and also div .A for your thoughts.
Code:
<div class="A">
<p >
A
</p>
<p class="B">
B
</p>
</div>
Css:
div p {
background-color: cyan;
}
div .B{
font-size: 32px;
}
div .A{
color: red;
}
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
I'm trying to make a div with text within it that is going to change whenever the user hovers over the div area, and not only the p tag. I am however not able to make my solution work.
JSfiddle
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover + p{
color:#fff;
}
Take away the + symbol in your css:
JSFiddle
CSS:
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover p{
color:#fff;
}
If you were looking for the selector which means direct descendant of div, you wanted >.
eg:
div:hover > p{
/*styles*/
}
Which would have worked for:
<div>
<p>Stuff</p>
</div>
But not
<div>
<span>
<p>Incorrect HTML example</p>
</span>
</div>
With your current CSS, you're trying to select the sibling.
If your HTML was like this:
<div></div>
<p>Some piece of text that is gonna change color when hovering the div</p>
the colour of p would have changed.
Ultimately however, with this specific HTML, you don't even need to include the p in the css and can just do div:hover, but if you're going to have other elements in it, then you should keep the p.
Take out the + P
div:hover {
color: #fff;
}
In your css you have used like this.
div:hover + p{
color:#fff;
}
It means you are applying the hover style for the siblings element not child element. In your case you need to remove + and add just space.
SIBLINGS ELEMENT PROVED HERE
div:hover p{
color:#fff;
}
CHILD ELEMENT PROVED HERE
there is no need to mention the <p> at all you can simply state the colour of all child elements by setting the style on the parent:
JSFiddle
div:hover {
color:#fff;
}
However if you did just want to target the paragraph text only you would use a > (child combinator) to target the P ONLY.
You must read rule about descendant selectors here.
If you need more info about selectors in css
Solved:
div:hover p{
color: #fff;
}
Your Css:
div:hover + p{
color:#fff;
}
+ selector select all <p> elements that are placed immediately after <div> elements.
Demo Fiddle With "+" selector
You can see, In the above fiddle div:hover + p select the outer <p> element, which are placed immediately after <div> elements.
But in your Case you do not need to use + selector. Because you want to select the child element of hovered div.
So, you should try this:
div:hover p{
color:#fff;
}
Working Example
I have the different classes in each page of body tag and I used css for #top div within the body tag
<body class="one">
<div id="top"></div>
</body>
#top{
/*css code here*/
}
I want to use same css instead of class .one something like this:
#top:not(.one){
/*css code here*/
}
more clearly I want to apply the same css for all pages for #top but not to the page which body class is .one
Use the :not selector on the parent, not on the child.
body:not(.one) #top {
/*css code here*/
}
P.S - You should notice this selector have some browser support issues as you can see here.
My understanding is that using element.class should allow for a specific element assigned to a class to receive different "styling" than the rest of the class. This is not a question about whether this should be used or not, but rather I'm trying to understand how this selector is intended to work. From looking at a ton of examples on the internet, I believe the syntax is correct and do not understand why this is not working.
Here is an example:
CSS:
h2 {
color: red;
}
.myClass {
color: green;
}
h2.myClass {
color: blue;
}
HTML:
<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
<h1>This header should be GREEN to match the class selector</h1>
<h2>This header should be BLUE to match the element.class selector</h2>
</div>
It should be this way:
h2.myClass looks for h2 with class myClass. But you actually want to apply style for h2 inside .myClass so you can use descendant selector .myClass h2.
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demo
This ref will give you some basic idea about the selectors and have a look at descendant selectors
h2.myClass refers to all h2 with class="myClass".
.myClass h2 refers to all h2 that are children of (i.e. nested in) elements with class="myClass".
If you want the h2 in your HTML to appear blue, change the CSS to the following:
.myClass h2 {
color: blue;
}
If you want to be able to reference that h2 by a class rather than its tag, you should leave the CSS as it is and give the h2 a class in the HTML:
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
The element.class selector is for styling situations such as this:
<span class="large"> </span>
<p class="large"> </p>
.large {
font-size:150%; font-weight:bold;
}
p.large {
color:blue;
}
Both your span and p will be assigned the font-size and font-weight from .large, but the color blue will only be assigned to p.
As others have pointed out, what you're working with is descendant selectors.
h2.myClass is only valid for h2 elements which got the class myClass directly assigned.
Your want to note it like this:
.myClass h2
Which selects all children of myClass which have the tagname h2
The CSS :first-child selector allows you to target an element that is the first child element within its parent.
element:first-child { style_properties }
table:first-child { style_properties }