newcoder1010 Posted February 26, 2018 Share Posted February 26, 2018 Hi, When I inspect my page in chrome, I see the links shows in different formats. Below are some examples: .nav > li > a .dropdown-menu > .active > a .nav .open > a Regardless how the a links show, I like to apply css to all links. Below css is not working for all the links. My site is a bootstrap theme. Some css is being applied from bootstrap CDN and not reading my css unless I delete bootstrap css. a:link { color: blue; } /* mouse over link */ a:hover { color: red; } /* selected link */ a:active { color: yellow; } a:focus { color: green; } How can I apply css by forcing as : - All links blue color - All links on hover red. - All links on click green - All links when we are on the page color(active page) are yellow. Thank you. Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2018 Share Posted February 26, 2018 The problem is that the selectors above are much more specific than the ones below, you will need to add additional selectors to override the bootstrap ones. There are some quick ways to easily override all rules, but I would be careful with them as it would make it much more difficult to override your own rules later. If your <body> element has an ID, the ID selector takes precedence over all other selectors. Given this body tag <body id="site">, these selectors would change all links: #site a:link { color: blue; } #site a:hover { color: red; } #site a:active { color: yellow; } #site a:focus { color: green; } The only way to override this is by using another ID selector. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 26, 2018 Share Posted February 26, 2018 The usual styling must be applied in order of link, visited, hover, active, then add others after this initial styling. I would create your own custom stylesheet to place these styles into, to overwrite bootstrap and any other css framework. This prevents for example your custom css, if placed within bootstrap being wiped if updated. This custom stylesheet should appear below all other stylesheets. Now you have few options 1) identify each link selector styling and overwite with your own custom css, exactly as the discovered selector used. 2) give body a id ref and use id ref with selector Example: #mycustomcss a:link{} This by theory should overwrite most, unless the css selector has higher id precedence, or uses !important, or the link itself has inline color: styling. Link to comment Share on other sites More sharing options...
newcoder1010 Posted February 26, 2018 Author Share Posted February 26, 2018 Thanks. I will use both options depending on site. Link to comment Share on other sites More sharing options...
shaili_shah Posted June 24, 2019 Share Posted June 24, 2019 to apply style, you can try !important or override with id selector . Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now