Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
just so you know, I CAN NOT MODIFY ON JAVASCRIPT, I CAN ONLY ADD CUSTOM CSS
I have this website
https://elt.sa
you can check the last <section> tag
I want to select it in css so I can change the color of it
I can see that it's the last section! but it's not getting selected until I write
nth-last-child(18) and sometimes 19 !
check the images below, and you can inspect the website above and modify on <style> tag inside header , (the second one)
If it is always last then you can use :last-of-type, for more details check this CSS Selectors
section.section:last-of-type {
background: #cc3329;
}
section.section:last-of-type - it selects every section.section element that is the last section.section element of its parent.
you can do it also by javascript or css
for javascript
let section = document.querySelectorAll('section');
section[section.length - 1].style.background = 'red'
or css
section:last-of-type{
background: red;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I need to remove the navbar in my Hestia Theme.
I tried .navbar {display:none;} and when I use it the top bar gets white and I need to remove it.
Could you help me with this problem, please?
Kind regards
As it showed in the piture
In Wordpress sites the main tag has a margin at the top. This is causing the white bar above the page after you removed the navigation. You can "deactivate" this with:
.main, main {
margin-top: 0 !important;
}
Edit: I have checked out your site and have found the reason. There is some top padding defined by inline CSS at the article tag, that's get added by some JavaScript, but I cannot tell you why.
But you can still turn it of with:
.elementor-page .pagebuilder-section {
padding: 0 !important;
}
This CSS rule is an extended rule already applied by Elementor, buts get overwritten by this inline CSS. I just added the !important to fix it:
If that was helpful and you used this answer to solve your problem, it would be nice if you mark this answer as accepted. If this answer doesn't work or you have other questions, please response with a comment.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Here is another unexpected outcome of a CSS rule. (Yesterday I posted this that was not understood here: How to I avoid that the CSS rule * {} trump .a .b {}?)
For historical reasons I have these CSS rules:
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
The last rule shows up in Chrome on a P element. The computed value of --baseFontSize on that element is " 16px". The "Computed Style" shows that the last rule used is the rule above.
But. The value is "20.8px".
What is going on?
If we create a html document with your variables it can be seen that the value is indeed 16px as expected. So there are no 20.8px anywhere.
Maybe you zoomed in on browser? Set a different font-size on your OS?
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
<p> Here be text </p>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have created two buttons (more like stole them by following random tutorials)
http://cssdesk.com/bfwj9
What I would like to do is to have these two buttons side by side in this manner
Choose one: [play_button] [stop_button]
How do I go about ensuring that they end up on the same line?
I am a complete css newbie, but I learn by doing rather than reading all these complex css commands. So can someone help me please?
#play_button
{
float:left;
}
#stop_button
{
float:left;
}
Add this to your CSS:
#container_button { float: left; }
To add a little spacing inbetween them, you could even add margin-right: 1em;.
The reason this works is that your two buttons are block level elements, and float allows them to sit side by each other.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
My website is a simple one using images. The whole site content is based on the menu's div tags. I added link using tag and created separate hover effects for it using different , now what happens is when i hover that link the same hover effect that appears for menu occurs and the hover i created for the link doesn't work. I can close menu's div only at the last[as the alignment is getting changed if i close the menu's div before the link and use a different div for the link]. Please suggest a solution, if u want me to post the code to make it clear please tell it. Thank you.!
its best to make sure that your making sure the pseudo-class is specific to a certain node. This can be achieved by going :
#(div name) a:hover {
color: blue;
text-decoration: underline;
}
it'll ensure that the a attribute nested inside of the specific div is being referenced.
You can use attribute selector, to select particular link, or type of link, based on what's in markup: Here's example:
a[href="www.yoursite.com"]:hover { color: red; }
You can take any attribute that's inside your html tag, to select (id, class, href, title, alt etc. even made up attributes).
You can take it step further, by using ,,similar'' operator, which selects element based on, if specified phrase exists in the attribute (but it's not exactly same). For example:
a[href~="https"]:hover { color: red; }
Will select all links with https inside href atribute.
Remember, that attirbute selector isn't suported in ie6, and is problematic in ie7, keep that in mind, you can look for workaround easly tho.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a site with a log-in and a contact module, which is sliding out from the top-left side of the page. I have only one problem: the log-in module is working fine, but the contact module is going underneath the text, rather than above it. I set z-index: 999999; but, it still isn't working. I'm using position: fixed;
Moving #iUngicontactForm from the table to the body tag will fix it.
The problem is that the z-index of an element is inherited from it's parent and it only applies to sibling elements. And as you're using fixed positioning, it's a quick fix.
So instead of something like this:
<body>
<table>
<tr><td>some content..</td></tr>
<tr><td><div id="iUngicontactForm"></div></td></tr>
</table>
</body>
do this:
<body>
<div id="iUngicontactForm"></div>
<table>
<tr><td>some content..</td></tr>
</table>
</body>
if you go up the dom tree until .art-block and set z-index there it fixes the problem. Confirmed in firebug. Not to the whole .art-block class but you'll need to add a new class there, or id, or inline -- to that specific .art-block.