How to make a link not inherit properties? - html

So I don't really know how to phrase this, but I'll give it a shot.
On my website I have a navigation bar on the left. The paragraph and link elements are styled in the CSS. Now I have one link in my navigation bar with a unique id (the only one) that I do not want to inherit from the navigation bar's CSS.
It looks something like this:
<nav id="leftbar">
<p>Navigation area 1</p>
Home
Link 1
Link 2
Link 3
Link 4
</nav>
So leftbar is styled in CSS as nav#leftbar. <p> is styled as nav#leftbar p. Links are styled as nav#leftbar a and nav#leftbar a:hover. Now I added a new block to my CSS using #special. But because it's a link element and it's inside the navigation bar tags, it still inherits all properties from nav#leftbar a.
Is there any way to change that, or do I have to move the link with the "special" id outside of the navigation bar tags? I'd rather not do this as it is part of the navigation bar, just different.
I also tried adding the CSS properties of nav#leftbar a to #special and change them to overwrite them, but it still prioritizes nav#leftbar a.


You can use the :not() pseudo-class to exclude the link with the special id:
nav#leftbar a:not(#special) {
color: red;
}
#leftbar a:not(#special):hover {
color: gold;
}
<nav id="leftbar">
Special
<p>Navigation area 1</p>
Home
Link 1
Link 2
Link 3
Link 4
</nav>


so
a:not(#special) {
text-decoration:none;
font-size:24px;
color:red;
}
links
links
links
links
links


The problem is that nav#leftbar a is much more specific than #special. The former contains one id and two tags, the latter just one id.
I would change the id leftbar to a class leftbar and also remove the tag name in front of it in css, so you would target .leftbar a and .leftbar p. Then #special is more specific because it contains an id. (Classes are more significant than tags, ids are more significant than classes.)
If you know that #special is always the first entry of #leftbar, you also could target it using something like #leftbar a:first-child, without the need for an id.

Related

Linking same page in html but url get index.html/#[object%20Object]

I am new in website development. I have problem is navigation bar never I am click to navbar just home , about, service, contact there are in navigation bar if I am click to about that time to URL set please my problem this #[object%20Object]
I don't understand please help me
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
Same page link IDs used
<div id="welcome"></div>
<div id="about"></div>
<div id="service"></div>
<div id="contact-us"></div>
Please Help me

Try following code hope it will help
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
Same page link IDs used
<div id="welcome">
<h1>Welcome</h1>
Blink Html
In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.</div>
<div id="about">
<h1>About</h1>
Blink Html
In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.</div>
<div id="service">
<h1>Service</h1>
In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.</div>
<div id="contact-us">
<h1>Contact</h1>
In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.In CSS, "id" is a selector that is used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is you can create a link to any element on the page, rather than only the top or bottom. In the following sections, you'll see how to apply id to an HTML tag, and then how to link to it. This example will link to the opening paragraph at the top of this page.</div>

.tab-current CSS definition

I am pretty new to CSS. There seems to be a ton of properties and values and it is a bit overwhelming. I am currently trying to emulate a stylesheet I found online. I am currently stuck on this portion
.tabs nav li.tab-current {
...
...
...
}
I understand .tabs is class and .tabs nav is the nav within where the tabs class I used in the html page. Same goes for li. I'm not sure what the .tab-current means and how it is being used. I'm not sure where to look to find notes/documentation on this topic.

The structure looks something like this
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
I just added the ul tags in there since most li tags are found within them.
Anyway, the li.tag-current part of the selector just means that it's going to select the Hey and style it.
From the looks of it the tab-current class acts much like an active class you'd put on a list item or a menu item to show that it's the currently selected item.

li.tab-current means li element with class tab-current.
So basically your CSS rule will be applied to all li tags with class tab-current being inside nav elements which are inside elements with class tabs

Last floating image makes <h2> area clickable

I've made some links within an <ul> <li>. I made images clickable, linking to a new HTML file. I've got four of those, and I wanted to put two beside each other so I used float:left;.
However, when I create a new <h2> after those images, this <h2> becomes clickable and linking to the HTML file used in the last picture.
I've already used clear:both; but that doesn't work. Any idea about what may be happening here?

Put float: left; on H2 aswell or overflow: hidden; on li elements.

Some problems with a CSS and HTML accordion

I have begun writing a CSS and HTML collapsing menu system (AKA an accordion). I followed the tutorial posted here, however, I had to change it slightly. Instead of using <a> and <p> tags, I had to use <div> tags because I will be adding images to both 'sections' at a later stage. After I change the <a> and <p> tags to <div> tags, the slide-out content does not display when the mouse is hovering over the box. It is only when the mouse is moved away does the content briefly display before the 'drawer' retracts. I have posted my code bellow and any help would be very much appreciated.
Link to my CSS: http://cl.ly/Cuoe
Link to my HTML: http://cl.ly/Cuhf
Many Thanks.

I think the problem is that your #accordion div:hover CSS rule is now catching both the item div AND the itemTitle and itemContent divs inside the item.
In your CSS file, try replacing both instances of #accordion div:hover with #accordion div.item:hover. This will cause the rule to only apply to divs with class item.
Edit: You could also just change it to #accordion .item:hover

Check this fiddle: http://jsfiddle.net/ufPrF/
The problem was that you were setting a height property on #accordion div:hover which affected all <div>s inside the accordion (including title, content etc..). You should have either done #accordion > div:hover OR #accordion .item:hover (like in the fiddle)

Can the header tag contain more than 1 nav tag?

for example, I have a network nav menu at the top of the page which contains links to sites across the network and my main nav contains navigation to this site. Can both of these nav items be in the same header tag in html5? So I would have something like
<header>
<nav id="nav_network"></nav>
logo and stuff
<nav id="nav_site"></nav>
</header>
Is this valid?

This is fine by the validator:
http://validator.w3.org/check
(As long as you include a head and a title in the doc)
Usually, though, you would place the nav outside the header.
Header is more like the title, logo, and a search form.
A header element is intended to usually contain the section's heading
(an h1–h6 element or an hgroup element), but this is not required. The
header element can also be used to wrap a section's table of contents,
a search form, or any relevant logos.
http://dev.w3.org/html5/spec/Overview.html#the-header-element
More here: http://html5doctor.com/the-header-element/

There is nothing wrong in using Multiple nav in header, it is perfectly fine.

Yes, you can insert more than one element; that is the answer if you are basically asking about the availability. You can use more than one element, and the browser will read your code perfectly since the element is read as a element in your browser, and there is no difference between them.
But as an SEO wise it is not recommended because the is telling search engines where they can find your navigation menu. So, it is supposed to use only one navigation bar on your website.
Briefly, you can do that, but it is not recommended.