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.
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
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;
}
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 4 years ago.
Improve this question
Don't have much experience with css, but how do I override the settings for that highlighted via div class p span? I need to override the color to #ffffff
[Update] thank you for your answers, you all have helped to solve this, have been stuck whole day on this and could not solve it or find the specific tutorial or sample.
Sorry if my question is not very well-formed and very specific without providing much context. And sorry again, if I was not able to find the right answer on google, as CSS looks a bit like voodoo coming from Swift world. I know what I wanted to achieve but I could not find the right way to do it. Thank you all for teaching me something new and useful today.
If you use the selector .woocommerce-product-details__short-description, you'll select the div element that contains the p element that contains the span you want to style. So to select the span, you could do: .woocommerce-product-details__short-description > p > span. This risks selecting more elements than you really want to select - it will select all spans that are children of ps that are children of elements with the class.
If you wanted to just select this specific element, you'd have to be more specific. Without seeing the rest of the code, it's hard to say exactly what makes this element unique. One consideration is the unique id of the parent product element: product-45590. So to make your selector very specific, you might do #product-45590 .woocommerce-product-details__short-description > p > span. Note the space vs the > symbol. The > signifies a direct descendant, like a child to a parent, while the space signifies any descendant, like a grandchild to a grandparent or a child to a parent.
For the actual color-changing once the selector is right, you can just do color: #ffffff. However, because of CSS selector specificity, you cannot just override the color on an element that has the color defined with an inline style. So you also have to add !important to the rule. Note that this is typically not preferred practice because it means that future developers will have a very hard time overriding your style, but sometimes it's necessary.
Putting it all together:
.woocommerce-product-details__short-description > p > span {
color: #ffffff !important;
}
use below code with important
.woocommerce-product-details__short-description > p > span{
color: #fff!important;
}
I think you could just edit the color: #3333 to color: #fff
Inline styling in html takes priority, so you will have to change that to your desired colour or use !important after the colour in css.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
In an online tutorial, I was recently told to create a class for nav elements called "nav". I'm a beginner in CSS, but is it just me, or is this redundant/confusing/bad practice?
NO it's not redundant.
YES it's redundant if you think in your specific case you're fine with nav{ /*blaah blaah*/ }
<nav> is a Semantic HTML5 tag that represents toward SEO a navigation. A navitagion is all you want it to be. So in the case you have multiple nav elements in our page and you're OK to target-styles directly the tag element using nav I'll be glad to see that.
It's not redundant. The DOM element nav is different from the CSS class nav.
If you wanted to style this element by class, you would use this style declaration (for example):
.nav { background-color : #F00; }
if it were styled by element type it would be:
nav { background-color : #F00; }
This may seem trivial, but that period . makes a difference. It means you are identifying the item by class and not by element name. If you use the class syntax (with the .) then you could also write:
<div class="nav"></div>
This would show with a red background if you included the class definition, but not if you styled the element type directly.
In simple applications you may be able to get away with directly styling element types (e.g. <nav>) as opposed to classes (e.g. class="nav"), but as you get more complex layouts you are going to want to use classes. Additionally, if you use a selector-based library like jQuery, or document.querySelect() you may have good reasons for specifying a class.
If you truely can know that all <nav> elements can be styled the same in all your pages, then by all means just use the element selector, but to leave yourself flexibility it's best to use classes.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am relatively new to CSS and yet I seem to have got the language reasonably well for a newbie. However, whilst many of the tutorials I have read often warn about "organising and structuring your stylesheet properly" (and I can certainly see why now I have created some rather long stylesheets myself) I cant for the life of me find any info about a standardised format for a styleheet or a logical pattern for layout that makes later human reading easy.
For example, do I create a comment-bracketed section for each "geographical" section of my page (header, row1, row2, article1 etc) and keep all styles for that section within those comment borders? The problem seems when I have styles that get re-used in other sections - and putting them under a section for page-wide styles then negates the purpose of grouping them by section at all. Likewise, structuring my stylesheet by grouping based on text styles, layout styles etc seems even more confusing.
Is there a "good practice"? I know this sounds dumb but it seems no matter what you do with HTML and CSS somebody is ready to tell you its wrong, bad practice or unsemantic and I'm left confused. I want my code to be a good example of my work in case an employer wants to check it in future.
I've never been actually taught, however I can let you know how I organise my CSS documents. As you say, I like to divide it up into "geographical" areas... i.e. the rules that apply to the header, the side bars, the main content, the footer, etc. And then, below these I add very specific rules, say if I need to style a form or a table on a particular page. Finally I add a "General Gubbins" section at the bottom when I add generic rules that may apply across the board.
Oh yes, I also like to add the designer's palette to the top for quick reference.
For example...
/*
PALETTE:
dark grey : #555555;
pink : #d93575;
*/
/* HEADER */
#header {...}
#header ul {...}
/* SIDE BAR */
#side {...}
#side ul {....}
/* CONTENT */
#content{...}
#content p {....}
/* FOOTER */
#footer{...}
#footer div {....}
/* FORMS */
form {...}
input {...}
/* GENERAL GUBBINS */
.center {...}
strong {...}
floatleft {...}
These guys advise you to "Organize the Stylesheet with a Top-down Structure" ( http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/ ). I often use multiple style sheets. In MVC for instance - you can regiser styles on a per-view basis. That way you can put view-specific styles in a specific style sheet while not messing with your 'shared' or 'layout' one.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I read an article where it was recommended that we should ONLY use classes in our markup and only use ids when we need to refere to it from javascript (as it is easier to attach functions to ids)
At the moment I only use classes when I have more than one element that needs the similar style. However the article (which I THINK I read - but have no reference) stated that we should use classes throughout
I would do this:
<header id="banner"></header>
Where as the recommendation was :
<header class="banner"></header>
(even though the banner is only used once per page)
is this the new "good practice"?
Thanks
As far as I know you are correct, you should use classes when you need to style multiple elements and IDs when you are only styling a unique element.
I think you may have stumbled on an article about object oriented css. The basic idea is that you should think of the style as a sort of abstraction which is linked to your markup via classes. I find it to be a good technique for keeping things organized, but, as with all techniques, it's not a universal hard and fast rule. I see no problem with linking style to markup with ID's, as long as that makes the most sense.
It's what "makes sense" that is the real tricky thing to define.
ID Attribute, Definition and Usage
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
Read more about it here!
CLASS Attribute, Definition and Usage
The class attribute specifies one or more classnames for an element.
The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
Read more about it here!
So, you can style using either Id's your Class's, just knowing that the class can be re-utilized on other elements across your web page, the Id must always be unique.
The reason to tell that Class's are the best attribute to utilize to apply CSS is because you can have generic class names and use then a lot through your web page, thus simplifying and reducing the time spend coding :)
Simple example:
HTML
<div id="theUniqueID">
Hello!
</div>
<div id="theUniqueIDTwo">
Hello Again!
</div>
CSS
#theUniqueID {
font-size: 15px;
text-align: right;
}
#theUniqueIDTwo {
font-size: 15px;
text-align: right;
}
Can be reduced to:
#theUniqueID, #theUniqueIDTwo {
font-size: 15px;
text-align: right;
}
And can be generically utilized across the document like this:
.format_01 {
font-size: 15px;
text-align: right;
}
Having then the HTML like:
<div class="format_01">
Hello!
</div>
<div class="format_01">
Hello Again!
</div>
<div class="format_01">
Hello Again and Again!
</div>
Ps:
Sorry for the overkill answer, but this allows others with less knowledge to learn as well.
Basically you should use id for unique elements that means if you want to keep an element on the page that won't be appear on the page twice then you should use id and to style a group of elements with same style or to keep some elements in the same group you should use class.
But remember, you can also use class for a single a element but you can never use an id for more than one element on the page.
For example, getElementById or $('#idOfElement') (using jQuery) returns a single element but getElementsByClassName or $('.idOfElement') (using jQuery) returns an array of matched elements. So if you have more than one element on the page using same id then you'll get only the first element that have the id, so never use id for more than one element.